记录学习篇-Compose(2)

前言

上面一篇记录学习篇-Compose(1)我们学习了什么是Compose并且写出了一个简单的Hello Android。
这篇我们来学习布局，并且能够学习到几个常用的控件，下面都是我自己看官方文档和自己看的一些别人文章学习的，如果有错误请指正，谢谢支持!

1，纵向线性布局Column

@Composable
fun MyLinearLayout(){
    Column {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

查看效果

@Preview(showBackground = true)
@Composable
fun PreviewContent() {
    ComposeTheme {
        MyLinearLayout()
    }
}

运行效果发现是自适应大小，如果我们需要显示
android:layout_width=“match_parent”
android:layout_height=“match_parent”
添加

@Composable
fun MyLinearLayout() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
    ) {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

修改控件的样式都在modifier参数里面设置，我们可以查看它里面有很多方法

我下面列举几个常用的方法

• fillMaxWidth() 填满屏幕的宽度
• fillMaxHeight() 填满屏幕的高度
• background() 设置背景颜色
• width() 设置固定宽度
• height() 设置固定高度
• size() 设置固定宽度和固定高度
• padding() 设置内外边距
• offset() 设置XY偏移量
• clip() 设置样式 如圆形（CircleShape）、圆角（MaterialTheme.shapes.medium）等等
• border() 设置边框
• alpha() 设置透明度
• 里面还有很多方法，需要自己去一个个探索了

还有对齐方式

@Composable
fun MyLinearLayout() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

2，横向线性布局 Row，用法和上面大同小异

@Composable
fun MyLinearLayout() {
    Row {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

3，约束布局 ConstraintLayout

需要添加依赖

    implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02"

@Composable
fun MyConstraintLayout() {
    ConstraintLayout(
        modifier = Modifier
            .padding(vertical = 10.dp)
            .fillMaxWidth()
    ) {
        //创建参考，类似于id，唯一性
        val (text, image) = createRefs()

        Text(
            text = "皮卡丘",
            modifier = Modifier
                //把参考值放入约束中
                .constrainAs(text) {
                    //约束于屏幕的左侧
                    start.linkTo(parent.start)
                    //约束于屏幕的右侧
                    end.linkTo(parent.end)
                    //约束于[image]参考值下方10dp
                    top.linkTo(image.bottom, 10.dp)
                }
        )

        Image(
            painter = painterResource(R.drawable.default_poke),
            contentDescription = "Pikachu",
            modifier = Modifier
                //把参考值放入约束中
                .constrainAs(image) {
                    //约束于屏幕的左侧
                    start.linkTo(parent.start)
                    //约束于屏幕的右侧
                    end.linkTo(parent.end)
                    //约束于屏幕的上方5dp
                    top.linkTo(parent.top, 5.dp)
                }
                .size(100.dp)
        )
    }
}

其实用法也和ConstraintLayout大同小异，理解了这几个参数用法用起来就很简单。

4，纵向，横向列表

纵向列表

data class Pokemon(val name: String, @DrawableRes val url: Int = R.drawable.default_poke)

val pokemonList by lazy {
    val list = mutableListOf<Pokemon>()
    (0..8).forEach {
        list.add(Pokemon("皮卡丘$it"))
    }
    list
}

@Composable
fun MyList() {
    LazyColumn {
        items(pokemonList) {
            MyConstraintLayout(it)
        }
    }
}

横向列表

@Composable
fun MyList() {
    LazyRow {
        items(pokemonList) {
            MyConstraintLayout(it)
        }
    }
}

附加，网格布局

@ExperimentalFoundationApi
@Composable
fun MyList() {
    LazyVerticalGrid(cells = GridCells.Fixed(2)) {
        items(pokemonList) {
            MyConstraintLayout(it)
        }
    }
}

是不是发现列表很简单，不用再去些那些复杂的adapter了。

5，结束

这就是学习篇的(2)布局篇的内容了，之后我还会更新学习篇(3)。相信大家知道了怎么在和在.xml里面一样布局了，我们还学到了几个控件的简单使用Text(),Image()。
谢谢大家支持。