Flutter 流式布局_Wrap

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),
    );
  }
}