Android compose Text、Image、Button、box、column、row、lazycolumn、lazyrow

Published on with 877 views

在 Android 开发中,UI 是非常重要的一部分。而随着 Compose 技术的出现,我们可以更加方便快捷地构建出漂亮的 UI 界面。在 Compose 中,Text、Image、Button、Box、Column、Row、LazyColumn、LazyRow 是经常使用的组合件。本篇博客将对这些组件进行总结和介绍。

Text 组件

Text 组件用于显示文本。使用时,我们只需将需要显示的文本传入参数便可,如下所示:

Text(text = "Hello, world!")

我们还可以通过 fontSizecolorfontStyle 等参数来更改字体大小、颜色和风格:

Text(
    text = "Hello, world!",
    fontSize = 20.sp,
    color = Color.Red,
    fontStyle = FontStyle.Italic
)

Image 组件

Image 组件用于显示图片。我们可以通过传入图片资源的 resId 或者图片的 uri 来将图片展示出来:

Image(
    painter = painterResource(R.drawable.image),
    contentDescription = "",
)
Image(
    painter = rememberCoilPainter(request = imageUrl, fadeIn = true),
    contentDescription = ""
)

其中,我们使用了 Coil 框架加载网络图片,需要在 build.gradle 添加如下依赖:

implementation "io.coil-kt:coil-compose:1.3.2"

Button 组件

Button 组件用于创建按钮。我们可以通过 onClick 参数来处理按钮点击事件,并将需要在按钮上显示的文本传入 text 参数中:

Button(onClick = { /* 处理点击事件 */ }) {
    Text(text = "点击按钮")
}

Box 组件

Box 组件用于创建一个盒子。它可以包含其他的组件,并设置它们的位置、大小以及对齐方式。默认情况下,Box 组件会使用 Column 布局来呈现其子组件:

Box {
    // 子组件
}

我们可以通过 contentAlignment 参数来设置子组件的对齐方式:

Box(
    contentAlignment = Alignment.Center
) {
    // 子组件
}

Column 组件

Column 组件用于创建垂直排列的子组件。类似于 LinearLayout 中的 orientation="vertical"

Column {
    // 垂直排列的子组件
}

Row 组件

Row 组件用于创建水平排列的子组件。类似于 LinearLayout 中的 orientation="horizontal"

Row {
    // 水平排列的子组件
}

LazyColumn 组件

LazyColumn 组件用于创建垂直滚动的子组件。由于它是懒加载的,因此性能会更好,尤其在大量数据时效果更明显:

LazyColumn {
    // 垂直滚动的子组件
}

LazyRow 组件

LazyRow 组件用于创建水平滚动的子组件。同样是懒加载的:

LazyRow {
    // 水平滚动的子组件
}

这些组件是 Compose UI 中非常常用的组件。它们可以更加方便和快捷地构建出漂亮的 UI 界面。希望这篇博客能够帮助大家更好地掌握这些组件的使用。



标题:Android compose Text、Image、Button、box、column、row、lazycolumn、lazyrow
作者:yanjing
地址:https://blog.yanjingtp.cn/articles/2023/05/11/1683797413123.html