查看全部组件文章浏览阅读495次，点赞17次，收藏12次。alignment。https://blog.csdn.net/b275518834/article/details/144751353
- Column
- 功能说明：将子组件按照垂直方向依次排列，能够设置组件之间的间距、对齐方式等属性，便于构建垂直方向的布局结构，常用于呈现列表式或堆叠式的界面内容。
- 示例场景：在设置页面，多个设置选项垂直排列，每个选项独占一行，清晰明了；在聊天界面，聊天记录按照时间顺序垂直堆叠显示。
- Row
- 功能说明：把子组件按水平方向排列，常用于创建菜单、工具条等水平布局的界面元素，可灵活调整组件之间的间距和对齐方式，使界面更加整洁和美观。
- 示例场景：在导航栏中，多个导航按钮水平分布，方便用户进行页面切换操作；在工具类应用中，一排功能图标整齐排列，供用户快速选择操
package org.lxz.project.compose.demoimport androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonColors
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dpobject RowAndColumnDemo {@Composablefun showDemo(){Column {VerticalColumnLayoutExample()HorizontalBoxLayoutExample()RowWithThreeEqualElementsExample()}}@Composablefun VerticalColumnLayoutExample() {Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) {Button(onClick = { /* 这里可以添加点击按钮的逻辑 */ },modifier = Modifier.fillMaxWidth()) {Text("操作按钮A")}Text(text = "这是操作按钮A的文字说明",modifier = Modifier.padding(top = 8.dp).align(Alignment.CenterHorizontally))}}@Composablefun HorizontalBoxLayoutExample() {Row(modifier = Modifier.fillMaxWidth().wrapContentHeight().padding(16.dp),) {Button(onClick = { /* 点击逻辑 */ },modifier = Modifier.width(120.dp)) {Text("操作按钮B")}Text(text = "这是操作按钮B的文字说明",modifier = Modifier.padding(end = 8.dp).align(Alignment.CenterVertically))}}@Composablefun RowWithThreeEqualElementsExample() {var myModifier:Modifiervar buttonColor = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent,contentColor = Color.Black)Row(modifier = Modifier.fillMaxWidth().padding(16.dp)) {Button(onClick = {},colors = buttonColor,modifier = Modifier.weight(1f) // 设置权重.padding(end = 8.dp).apply { myModifier = this }){Text("元素a weight1")}Button(onClick = {},colors = buttonColor,modifier = myModifier){Text("元素b weight1")}Button(onClick = {},colors = buttonColor,modifier = Modifier.weight(2f) // 设置权重.padding(end = 8.dp).apply { myModifier = this }){Text("元素c weight2")}}}
}运行后效果
