美文网首页
Android Jetpack Compose控件基础篇

Android Jetpack Compose控件基础篇

作者: Tongsr | 来源:发表于2021-08-10 16:42 被阅读0次
    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")
          }
      })
      

    相关文章

      网友评论

          本文标题:Android Jetpack Compose控件基础篇

          本文链接:https://www.haomeiwen.com/subject/tvqfbltx.html