Compose中的基本布局(二)

Mr_Tony

已于 2024-03-06 20:57:11 修改

阅读量2.8k

点赞数 1

分类专栏： JetPack 文章标签： kotlin android

于 2021-07-14 20:54:21 首次发布

本文链接：https://blog.csdn.net/Mr_Tony/article/details/118737172

版权

JetPack 专栏收录该内容

85 篇文章 35 订阅

订阅专栏

文章目录

一、前言

上篇描述了Compose的环境配置和简单的演示，本片来讲布局的使用。在Compose中有一些基础的布局Column、Row、Box、BoxWithConstraints，也有一些比较复杂的布局。如延迟列表布局LazyColumn、LazyRow，还有ConstraintLayout

二、Column

Column可以使布局进行垂直排列，示例代码如下：

Column{
   Text("A day in Shark Fin Cove")
   Text("Davenport, California")
   Text("December 2018")
}

三、Modifier

Modifier在Compose中是一个重要概念，需要仔细了解，这里只对齐进行简单演示并记录注意点
上述只是对控件进行了简单的排列，如果需要对其样式进行调整则需要使用Modifier。例如我们需要对其进行内边距进行填充。

Column(modifier = Modifier.padding(10.dp)){
    content()
    content()
    content()
}

注意:

Modifier使用链式调用函数时候，会从前往后组合，但是如果定义的内容重复或冲突的话，最后定义的会生效，前面的不会生效。但是then函数是个特例(或者size与sizeIn等类似的函数都不行)，暂时不知道原因。使用类似的函数时前面的会生效，后面的不会生效
参考代码:
约束条件和修饰符顺序
 Compose 修饰符
 Compose 修饰符列表

四、Row

Row是一个水平排列的布局，演示代码如下:

   @Composable
    fun row(){
        //由于横向的话没有间隔，所以需要添加间隔
        Row(modifier = Modifier.fillMaxWidth().background(color = Color.Cyan),
            horizontalArrangement = Arrangement.SpaceAround) {
            Button(onClick = {
                Toast.makeText(baseContext,"点击一下",Toast.LENGTH_LONG).show()
            }){
                Text("是我")
            }
            Button(onClick = {
                Toast.makeText(baseContext,"点击一下",Toast.LENGTH_LONG).show()
            }){
                Text("是我")
            }
            Button(onClick = {
                Toast.makeText(baseContext,"点击一下",Toast.LENGTH_LONG).show()
            }){
                Text("是我")
            }
        }
    }

五、Box

Box可以将一个元素放在另外一个元素之上

@Composable
fun box(){
    Box {
        Box(Modifier.fillMaxSize().background(Color.Cyan))
        Box(
            Modifier.matchParentSize()
                .padding(top = 20.dp, bottom = 20.dp)
                .background(Color.Yellow)
        )
        Box(
            Modifier.matchParentSize()
                .padding(40.dp)
                .background(Color.Magenta)
        )
        Box(
            Modifier.align(Alignment.Center)
                .size(300.dp, 300.dp)
                .background(Color.Green)
        )
        Box(
            Modifier.align(Alignment.TopStart)
                .size(150.dp, 150.dp)
                .background(Color.Red)
        )
        Box(
            Modifier.align(Alignment.BottomEnd)
                .size(150.dp, 150.dp)
                .background(Color.Blue)
        )
    }
}

六、BoxWithConstraints

假如布局需要根据尺寸和方向来更改布局内容，则BoxWithConstraints自适应布局可以派上用场。

BoxWithConstraints {
    val rectangleHeight = 100.dp
    if (maxHeight < rectangleHeight * 2) {
        Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
    } else {
        Column {
            Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
            Box(Modifier.size(50.dp, rectangleHeight).background(Color.Gray))
        }
    }
}

这里需要注意的是，最好不要使用Modifier.background来设置颜色，而是使用Surface来设置背景颜色，官方解释如下:

注意：当设置任何元素的背景颜色时，最好使用 Surface 来实现此目的，因为 Surface 会设置适当的内容颜色。请慎用直接 Modifier.background() 调用，这种调用不会设置适当的内容颜色。
参考链接如下:
https://developer.android.google.cn/jetpack/compose/themes
示例如下:

   Surface(
            color = Color.Red,
        ) {
            Text(text = "aa")
        }

七、AndroidView

该控件可以在Compose中嵌套原来的控件，操作如下:

    @Preview(showBackground = true)
    @Composable
    fun GetTest(){
        Text(text = "你好啊")
        AndroidView(factory = {
            TextView(it)
        }, update = {

        })
    }

参考如下链接:
使用compose在AndroidView中使用片段时崩溃

八、ComposeView

该控件可以使原来的布局嵌套Compose组件

九、FlowRow、FlowColumn

Compose 中的流布局

九、参考链接

Mr_Tony

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Compose中的基本布局(二)

文章目录一、前言二、Column三、Modifier四、Row五、Box六、BoxWithConstraints七、参考链接一、前言上篇描述了Compose的环境配置和简单的演示，本片来讲布局的使用。在Compose中有一些基础的布局Column、Row、Box、BoxWithConstraints，也有一些比较复杂的布局。如延迟列表布局LazyColumn、LazyRow，还有ConstraintLayout二、ColumnColumn可以使布局进行垂直排列，示例代码如下：Column{
复制链接

扫一扫