Compose组件

Compose

1. 盒子布局

盒子布局的三个基本元素:Box,Column,Row.

  1. Column对齐属性verticalArrangement:verticalArrangement = Arrangement.X
    verticalArrangement
  2. Row对齐属性horizontalArrangement:horizontalArrangement = Arrangement.X
    verticalArrangement

2. Image

1
2
3
4
5
6
7
painterResource(R.drawable.androidparty)
Image(
painter = image,
contentDescription = null,
contentScale = ContentScale.Crop,
alpha = 0.5F
)

3. Text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 基本属性
Text(
text = "text",
color = Color.Yellow,
fontSize = 16.sp,
fontWeight = FontWeight.Bold, // 权重
fontStyle = FontStyle.Italic, // 风格
fontFamily = FontFamily.Monospace, // 字体
textDecoration = TextDecoration.LineThrough,
letterSpacing = 20.sp, // 间距
lineHeight = 16.sp,
textAlign = TextAlign.Justify,
overflow = TextOverflow.Clip, // 溢出处理
softWrap = true, // 是否换行
maxLines = 1,
onTextLayout = {
// 布局发生变化时回调
},
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.padding(10.dp, 5.dp, 10.dp, 5.dp)
.align(alignment = Alignment.End)
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 多样式文本
Text(
buildAnnotatedString {
withStyle(ParagraphStyle()) {
append("春江潮水连海")
withStyle(SpanStyle(color = Color.Yellow)) {
append("平")
}
}
withStyle(ParagraphStyle()) {
append("海上明月共潮生")
}
append("诗歌")
}
)
1
2
3
4
5
6
7
8
9
SelectionContainer {
Text("长按可选择的文本")
}
ClickableText(
text = AnnotatedString("可点击文本"),
onClick = {

}
)

4. TextField

1
2
3
4
5
6
7
8
9
10
TextField(
label = { Text("输入框") },
value = amountInput,
onValueChange = { amountInput = it },
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Search // 键盘端按钮设置
),
)

5. Switch

1
2
3
4
5
6
7
var isChecked by remember { mutableStateOf(true) }
Switch(
checked = isChecked,
onCheckedChange = {
isChecked = it
},
)

6. Checkbox

1
2
3
4
5
6
7
var checked by remember { mutableStateOf(true) }
Checkbox(
checked = checked,
onCheckedChange = {
checked = it
}
)