Flutter 流式布局_Wrap

最新推荐文章于 2025-03-13 17:46:25 发布

不语风来去

最新推荐文章于 2025-03-13 17:46:25 发布

阅读量323

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/weixin_38397436/article/details/116802169

版权

Flutter 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了Flutter中的Wrap组件，通过设置spacing、runSpacing、alignment和runAlignment属性来调整横轴和纵轴的间距以及主轴和整体的对齐方式。示例代码展示了如何创建一个包含多个按钮的布局，并演示了这些属性的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

spacing

横轴间距

spacing: 10,

runSpacing

纵轴间距

runSpacing: 10,

alignment

主轴对齐方式

alignment: WrapAlignment.start,

runAlignment

整体相对于父布局的对齐方式

//child全部右对齐
runAlignment: WrapAlignment.end,

示例

class WrapBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 250,
      color: Colors.red,
      child: Wrap(
        //调整横轴间距
        spacing: 10,

        //调整纵轴间距
        runSpacing: 10,

        //主轴的对齐方式
        alignment: WrapAlignment.start,

        //相对父布局的对齐方式
        runAlignment: WrapAlignment.end,

        children: [
          MyButton("路飞"),
          MyButton("波雅汉库克"),
          MyButton("罗罗诺亚索隆"),
          MyButton("山治"),
          MyButton("娜美桑"),
          MyButton("布鲁克"),
          MyButton("乔巴"),
          MyButton("白胡子"),
          MyButton("基德"),
          MyButton("艾斯"),
        ],
      ),
    );
  }
}

//封装button组件
class MyButton extends StatelessWidget {
  String text = '';

  MyButton(this.text);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        print("点击了按钮 $text");
      },
      child: Text(text),
    );
  }
}