compose——布局居中

原创

已于 2023-09-21 17:38:35 修改 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2023-09-19 16:21:27 首次发布

本文介绍了在Flutter中如何使用Layoutwidgets如Row和Column实现元素的垂直和水平居中，以及如何使用Modifier和weight属性来创建等宽的子控件布局。

一、布局

布局居中

modifier = Modifier
            .fillMaxSize()
            .wrapContentSize(Alignment.Center)

1、ROW的垂直居中和水平居中

Row(
    modifier = Modifier.fillMaxHeight().fillMaxWidth(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically  // 垂直居中
) {
    // Your content here
}

2、Row其中一个子控件居右

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.End
) {
    Text("Left content")
    Text("Right content", modifier = Modifier.weight(1f).align(Alignment.End))
}

在这个示例中，Text("Right content")会被设置为居右显示。Modifier.weight(1f)将该子控件设置为占据剩余空间的权重，而Modifier.align(Alignment.End)将其对齐方式设置为居右。