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
    }
)