-
文本
方法:
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") } )
-
图片
方法:
Image()/Icon()
。两者没太大区别Image(painterResource(R.drawable.xxx), "image") Icon(painterResource(R.drawable.xxx), "icon")
-
纵向布局
Column
使用
Column
可将多个项垂直地放置在屏幕上Column { Text("1") Text("2") }
-
横向布局
Row
使用Row
可将多个项水平地放置在屏幕上Row { Text("1") Text("2") }
-
Box
使用Box
可将一个元素放在另一个元素上Box { Box( Modifier .size(100.dp, 100.dp) .background(Color.Black) ) { } Box( Modifier .size(50.dp, 50.dp) .background(Color.Red) ) { } }
-
列表
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") } }
-
横向列表
LazyRow
LazyRow(content = { item { Image(painterResource(R.drawable.xxx), "test") } item { Image(painterResource(R.drawable.xxx), "test") } })
网友评论