Jetpack Compose中的Row：什么是Row，composable属性及工作原理

Jetpack Compose中的Row是什么

Row — 是一个composable函数，将子元素按水平顺序排列。在Compose布局层次结构中，Row与Column和Box并列，占据基本容器的位置。

Row不需要指定尺寸——它会自动适应内容。除非设置了Modifier.fillMaxWidth或固定大小，否则Row的宽度等于子元素宽度之和（包括间距）。

Row的子元素可以拥有自己的修饰符，这些修饰符影响它们在容器内的位置。例如，Modifier.weight允许元素按比例占用可用空间的一部分。

根据Android Developers Blog, 2024，Row按顺序处理子元素，基于Compose的测量规则计算它们的尺寸：首先测量没有weight的元素，然后将剩余空间分配给有weight的元素。

Row的语法和基本签名

Row的基本签名包括modifier、horizontalArrangement和verticalAlignment参数。所有子元素在最后的lambda块content中传递。

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "一")
        Text(text = "二")
        Text(text = "三")
    }
}

Row的属性：horizontalArrangement和verticalAlignment

horizontalArrangement参数决定子元素在Row内沿水平轴如何分布。Arrangement类提供Start、End、Center、SpaceBetween、SpaceAround和SpaceEvenly值。

Arrangement.Start将元素放置在容器开头，Arrangement.End — 在末尾，Arrangement.Center — 在中间。这些值类似于CSS Flexbox中的justify-content属性。

Arrangement.SpaceBetween均匀分布元素，将第一个放在开头，最后一个放在末尾，其余元素之间间距相等。根据Material Design Guidelines, 2025，SpaceBetween最适合工具栏和导航行。

verticalAlignment参数垂直对齐元素。可用值包括Alignment.Top、Alignment.CenterVertically和Alignment.Bottom。当Row元素具有不同高度时此属性很有用——例如，图标旁边有多行文本。

Arrangement值表

使用Modifier.weight分配空间

Modifier.weight — 是仅在Row和Column内可用的修饰符，它按指定值在子元素之间分配可用空间。如果一个元素的权重为1.0f，另一个为2.0f，则第二个元素将占用两倍的空间。

没有weight的元素占用其内容所需的空间。剩余空间根据权重按比例分配给有weight的元素。这种行为类似于CSS Flexbox中的flex-grow属性。

根据Android Developer Documentation, 2025，weight仅在Row、Column和 BoxWithConstraints内有效。在Row中使用weight时，所有子元素分两次测量：首先是没有weight的元素，然后是有weight的元素。

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "左",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "右")
    }
}

Row的代码示例

第一个示例展示了带有图标和文本的Row — 联系人列表或设置的典型场景。Icon和Text被包裹在具有居中verticalAlignment的Row中。

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "添加到收藏")
    }
}

第二个示例展示了带有按钮和均匀分布的Row。SpaceEvenly保证所有按钮和容器边缘之间的间距相等。

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("取消") }
        Button(onClick = {}) { Text("保存") }
    }
}

第三个示例 — Card内的Row用于显示评分。嵌套的Row与Modifier.weight允许评分星标和数值占用固定空间。

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "评分：",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Row在自适应布局中的特点

在自适应布局中，Row需要控制宽度。如果Row的内容超出可用屏幕宽度，元素可能会溢出容器边界。为防止这种情况，请使用Modifier.horizontalScroll或切换到Column。

当组合Row与Modifier.weight时，为父级Row设置fillMaxWidth很重要——否则weight将分配不存在的空间。根据Material Design Guidelines, 2025，没有fillMaxWidth的带weight的Row被视为错误配置。

对于自适应界面，建议将Row与Box结合使用，或使用Arrangement.SpaceBetween在不同屏幕尺寸上自动分配元素。这可以在不需要媒体查询的情况下提供灵活性。

• Modifier.horizontalScroll — 在Row溢出时添加滚动
• Modifier.weight — 按比例分配空间
• Arrangement.SpaceBetween — 自适应分布，固定在边缘