Android Jetpack Compose控件基础篇

文本

方法：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")
    }
})