Android Row 的使用

阿巴斯甜
15 阅读4分钟

一、核心基础：Row 基本用法

在 Android 开发中，Row 是 Jetpack Compose 中用于水平排列子组件的核心布局组件，相当于传统 View 体系中的 LinearLayout(orientation = HORIZONTAL)，但功能更灵活、写法更简洁。下面从核心用法、属性详解、常见场景、注意事项四个维度，详细总结 Row 的使用。

1. 最简示例

Row 是组合函数，直接包裹需要水平排列的子组件即可：

@Composable
fun BasicRowDemo() {
    // 基础 Row：水平排列 Text 和 Button
    Row(
        modifier = Modifier
            .fillMaxWidth() // 占满父布局宽度
            .padding(16.dp) // 内边距
    ) {
        Text(
            text = "左侧文本",
            modifier = Modifier.padding(end = 8.dp) // 与右侧组件间距
        )
        Button(onClick = { /* 点击事件 */ }) {
            Text("右侧按钮")
        }
    }
}

效果：文本在左、按钮在右，水平排列，整体占满屏幕宽度。

2. 核心参数说明

Row 的关键参数决定了子组件的排列方式、对齐方式，核心参数如下：

Row(
modifier: Modifier = Modifier, // 布局修饰符（宽高、边距、背景等）
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, // 水平排列方式
verticalAlignment: Alignment.Vertical = Alignment.Top, // 垂直对齐方式
content: @Composable RowScope.() -> Unit // 子组件内容
)

二、关键属性详解

1. horizontalArrangement：水平排列方式（子组件之间的间距 / 分布）

控制子组件在水平方向的分布逻辑，常用值：

参数值效果说明适用场景
Arrangement.Start子组件靠左排列（默认）常规左对齐布局
Arrangement.End子组件靠右排列右侧操作按钮（如 “取消”）
Arrangement.Center子组件水平居中居中展示的横向布局
Arrangement.SpaceBetween子组件均匀分布，首尾贴边左右各一个组件（如标题 + 更多）
Arrangement.SpaceAround子组件均匀分布，首尾有一半间距多个平级按钮（如 “编辑 / 删除 / 分享”）
Arrangement.SpaceEvenly子组件均匀分布，所有间距相等均分横向空间的布局

示例：SpaceBetween 实现 “标题 + 更多” 布局

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("列表标题", fontSize = 18.sp)
    Text("更多", color = Color.Blue)
}}

2. verticalAlignment：垂直对齐方式（子组件在垂直方向的对齐）

控制子组件在 Row 垂直方向的对齐逻辑，常用值：

参数值效果说明
Alignment.Top子组件靠上对齐（默认）
Alignment.CenterVertically子组件垂直居中（最常用）
Alignment.Bottom子组件靠下对齐
Alignment.Baseline子组件按文字基线对齐（仅文本类组件有效）

示例：Baseline 对齐（解决文本和按钮文字错位）

Row(
    modifier = Modifier.padding(16.dp),
    verticalAlignment = Alignment.Baseline // 按文字基线对齐
) {
    Text("用户名", fontSize = 16.sp)
    Text("（必填）", fontSize = 12.sp, color = Color.Gray)
}

3. RowScope 特有的修饰符（子组件专属）

子组件在 Row 内部时，可使用 RowScope 提供的专属修饰符，核心是 weight：

  • weight(float)：子组件占据剩余水平空间的比例（类似传统 View 的 layout_weight）；
  • 作用：实现 “固定宽度 + 自适应宽度” 布局。

示例：权重布局（左侧固定宽度，右侧自适应）

Row(
    modifier = Modifier.fillMaxWidth().padding(16.dp)
) {
    // 左侧固定宽度：80dp
    Text(
        text = "姓名：",
        modifier = Modifier.width(80.dp)
    )
    // 右侧占满剩余宽度
    TextField(
        value = "",
        onValueChange = {},
        modifier = Modifier.weight(1f) // 权重1，占满剩余空间
    )
}

三、常见使用场景

场景 1：基础横向布局（如列表项）

@Composable
fun ListItemRow() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { /* 点击事件 */ },
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 左侧图标（固定大小）
        Icon(
            Icons.Default.Person,
            contentDescription = "头像",
            modifier = Modifier.size(40.dp)
        )
        // 中间文本区域（自适应宽度）
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(horizontal = 12.dp)
        ) {
            Text("张三", fontSize = 16.sp)
            Text("ID：123456", fontSize = 12.sp, color = Color.Gray)
        }
        // 右侧箭头（固定大小）
        Icon(Icons.Default.ArrowForwardIos, contentDescription = "箭头", modifier = Modifier.size(20.dp))
    }
}

场景 2：权重均分布局（如底部导航）

@Composable
fun BottomNavRow() {
    Row(
        modifier = Modifier.fillMaxWidth().height(56.dp).background(Color.White),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        // 三个按钮均分宽度
        repeat(3) { index ->
            Column(
                modifier = Modifier.weight(1f),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Icon(
                    when (index) {
                        0 -> Icons.Default.Home
                        1 -> Icons.Default.Search
                        else -> Icons.Default.Person
                    },
                    contentDescription = null
                )
                Text(when (index) {
                    0 -> "首页"
                    1 -> "搜索"
                    else -> "我的"
                }, fontSize = 12.sp)
            }
        }
    }
}

场景 3：嵌套布局（Row + Column）

@Composable
fun NestedRowColumn() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 左侧图标
        Icon(Icons.Default.Notifications, contentDescription = "通知", modifier = Modifier.size(32.dp))
        // 右侧列布局（垂直排列文本）
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(start = 12.dp)
        ) {
            Text("系统通知", fontSize = 16.sp, fontWeight = FontWeight.Bold)
            Text("您的订单已发货", fontSize = 14.sp, color = Color.Gray)
        }
        // 右侧时间文本
        Text("10分钟前", fontSize = 12.sp, color = Color.Gray)
    }
}

四、注意事项 & 最佳实践

  1. 避免过度嵌套：Row 嵌套 Column/Row 尽量不超过 2 层，复杂布局可拆分为独立 Composable 函数，提升可读性；

  2. weight 使用技巧：

    • 只有一个子组件用 weight(1f) 时，会占满剩余空间；
    • 多个子组件用 weight 时，按比例分配（如 weight(1f) 和 weight(2f) 按 1:2 分配）；
    • 不要给 weight 子组件同时设置 fillMaxWidth()，会冲突；

  3. 性能优化：

    • 固定大小的子组件优先设置 width()/size()，避免 Row 重复测量；
    • 长列表中的 Row 布局，配合 remember/lazyList 提升性能；

  4. 处理内容溢出：

    • 如果子组件总宽度超过 Row 宽度，会出现溢出，可通过 Modifier.horizontalScroll(rememberScrollState()) 实现横向滚动：

      kotlin

      Row(
    modifier = Modifier
        .fillMaxWidth()
        .horizontalScroll(rememberScrollState()) // 横向滚动
) {
    // 多个宽度超屏的子组件
    repeat(10) {
        Text("标签$it", modifier = Modifier.padding(4.dp).background(Color.LightGray).padding(8.dp))
    }
}

总结

  1. Row 是 Compose 中水平排列子组件的核心布局，核心参数是 horizontalArrangement（水平分布）、verticalAlignment（垂直对齐）；
  2. 子组件通过 weight 实现 “固定 + 自适应” 宽度布局，是最常用的进阶用法；
  3. 常见场景包括列表项、底部导航、横向表单等，配合 scroll 可处理内容溢出，避免布局报错。
avatar
文章
阅读
粉丝