文章目录
一、前言
上篇描述了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组件