Jetpack：003-布局中组件的对齐方式

news2024/11/14 20:53:57

文章目录

1. 概念介绍
2. 使用方法
- 2.1 行布局中的对齐方式
- 2.2 列布局中对齐方式
3. 示例代码
4. 内容总结

我们在上一章回中介绍了Jetpack中的页面和布局，本章回中将介绍 布局中组件的对齐方式。闲话休提，让我们一起Talk Android Jetpack吧

1. 概念介绍

我们在本章回中介绍的对齐方式是组件在布局中的排列方式，常见的是居中对齐，它表示组件位于布局的中间位置。

此外，我们介绍对齐主要是指在Column和Row这两个布局中的对齐方式。其它布局中的对齐与此类似，只是具体的细节不同而已。

2. 使用方法

我们使用的Column和Row布局都提供了相关的参数来设置位于它们中的组件对齐方式，接下来我们分别介绍这两种布局中对齐方式。

2.1 行布局中的对齐方式

verticalAlignment参数：它表示组件在垂直方向的对齐方式.它的值都包含start,top,end,bottom和center这些关键字，分别表示起点，顶部，终点，底部和居中对齐。这些对齐方式容易理解，大家可以自行修改代码来体验一下。
horizontalArrangement参数：它表示组件在水平方向的对齐方式；它的值比较特殊，不容易理解，大家可以参考官方给的图示，详细如下：

2.2 列布局中对齐方式

horizontalAlignment参数：它表示组件在水平方向的对齐方式；它的值都包含start,top,end,bottom和center这些关键字，分别表示起点，顶部，终点，底部和居中对齐。这些对齐方式容易理解，大家可以自行修改代码来体验一下。
verticalArrangement参数：它表示组件在垂直方向的对齐方式.它的值比较特殊，不容易理解，大家可以参考官方给的图示，详细如下：

3. 示例代码

Column(
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally,
    //列中元素的对齐方式，需要设置fillMaxHeight，不然只有内容大小，无法调节元素对齐
    verticalArrangement = Arrangement.Center
) {
    for (item in list) {
        //控制每个list选项的边距，长宽度，边框和背景颜色
        Surface(
            modifier = Modifier
                .fillMaxWidth() //相当于match_parent,默认是wrap_content
                .height(48.dp)
                .padding(vertical = 8.dp, horizontal = 16.dp)
                .border(width = 3.dp, color = Color.Yellow,)
        ) {
            Row (
                verticalAlignment = Alignment.CenterVertically,
                //行中元素的对齐方式，需要设置fillMaxWidth，不然只有内容大小，无法调节元素对齐
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .padding(start = 24.dp)
                    .align(alignment = Alignment.CenterHorizontally)
                    ){
                Text(text = item)
                Button(onClick = { Log.d("ex001","button is clicked")}) {
                    Text(text = "Button")
                }
            }
        }
    }
}