Jetpack Compose 布局

Column 是垂直方向布局，类似于 LinearLayout 里的 orientation = vertical

Column(modifier = Modifier.padding(all=5.dp)) {
    Text("码农宝")
    Text("3分钟前")
}

同样，使用 Row 可将多个项水平地放置在屏幕上, 类似于 LinearLayout 里的 orientation = horizontal。Column 和 Row 都支持配置它们所含元素的对齐方式。

Row(verticalAlignment = Alignment.CenterVertically) {
    Image(painter = painterResource(id = R.mipmap.ic_launcher), contentDescription = "Artist image")
    Column {
        Text("码农宝")
        Text("3分钟前")
    }
}

使用 Box 可将元素放在其他元素上。类似于 FrameLayout, Box 还支持为其包含的元素配置特定的对齐方式。

Box(contentAlignment = Alignment.TopEnd, modifier = Modifier.padding(start=10.dp, bottom = 10.dp)) {
    Image(painter = painterResource(id = R.drawable.avatar),
        modifier = Modifier
            .size(100.dp) // 设置图片大小
            .clip(CircleShape), // 裁剪为圆形
        contentScale = ContentScale.Crop, // 裁剪图片以适应大小
        contentDescription = "Artist image")
    Icon(Icons.Filled.CheckCircle, contentDescription = "Check mark")
}

上一篇 Jetpack Compose 的环境配置

下一篇 Jetpack Compose 修饰符