Android Jetpack Compose控件基础篇

1. 文本

   方法：Text()

   Text("默认")
   
   Text("大小、颜色", fontSize = 16.sp, color = Color.Blue)
   
   Text("斜体", fontStyle = FontStyle.Italic)
   
   Text("粗体", fontWeight = FontWeight.Bold)
   
   Text(
       "居中", textAlign = TextAlign.Center,
       modifier = Modifier.fillMaxWidth()
   )
   
   Text("最大行数 ".repeat(50), maxLines = 2)
   
   Text("文字溢出 ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
   
   Text("字体1", fontFamily = FontFamily.Serif)
   
   Text("字体2", fontFamily = FontFamily.SansSerif)
   
   

   文字可选择：SelectionContainer(){}

   文字不可选择：DisableSelection(){}

   可点击文字：ClickableText(){}

   组合文字：buildAnnotatedString(){}

   Text(
           buildAnnotatedString {
               withStyle(style = SpanStyle(color = Color.Blue)) {
                   append("H")
               }
               append("ello ")
   
               withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                   append("W")
               }
               append("orld")
           }
       )
   

2. 图片

   方法：Image()/Icon()。两者没太大区别

   Image(painterResource(R.drawable.xxx), "image")
   
   Icon(painterResource(R.drawable.xxx), "icon")
   

3. 纵向布局Column

   使用Column 可将多个项垂直地放置在屏幕上

   Column {
       Text("1")
       Text("2")
   }
   

4. 横向布局Row
   使用Row可将多个项水平地放置在屏幕上

   Row {
       Text("1")
       Text("2")
   }
   

5. Box
   使用 Box 可将一个元素放在另一个元素上

   Box {
       Box(
           Modifier
               .size(100.dp, 100.dp)
               .background(Color.Black)
       ) {
   
       }
   
       Box(
           Modifier
               .size(50.dp, 50.dp)
               .background(Color.Red)
       ) {
   
       }
   }
   

6. 列表LazyColumn

   LazyColumn {
       // Add a single item
       item {
           Text(text = "First item")
       }
   
       // Add 5 items
       items(5) { index ->
           Text(text = "Item: $index")
       }
   
       // Add another single item
       item {
           Text(text = "Last item")
       }
   }
   

7. 横向列表LazyRow

   LazyRow(content = {
       item {
           Image(painterResource(R.drawable.xxx), "test")
       }
   
       item {
           Image(painterResource(R.drawable.xxx), "test")
       }
   })