文本

方法：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("最大行數(shù) ".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()。兩者沒太大區(qū)別

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