flutter布局组件:wrap组件实现瀑布流

Wrap实现瀑布流效果

direction: 主轴方向,默认为水平方向
alignment: 主轴方向的对齐方式
spacing: 主轴方向上的间距
textDirection: 文本方向
verticalDirection: 定义了children的摆放顺序,默认是down
runSpacing: 次轴方向上的间距
runAlignment: 次轴的对齐方式

示例代码:

class WrapDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      direction: Axis.horizontal,///主轴方向,默认为水平方向
      alignment: WrapAlignment.center,///主轴方向的对齐方式
      spacing: 10,///主轴方向上的间距
      textDirection: TextDirection.ltr,///文本方向
      verticalDirection: VerticalDirection.down,///定义了children的摆放顺序,默认是down
      runSpacing: 20,///次轴方向上的间距
      runAlignment: WrapAlignment.center,///次轴的对齐方式
      children: [
        BlueButton("算死草"),
        BlueButton("喜剧之王"),
        BlueButton("唐伯虎点秋香"),
        BlueButton("无敌破坏王"),
        BlueButton("逃学威龙"),
        BlueButton("少林足球"),
        BlueButton("算死草"),
        BlueButton("喜剧之王"),
        BlueButton("唐伯虎点秋香"),
        BlueButton("无敌破坏王"),
        BlueButton("逃学威龙"),
        BlueButton("少林足球"),
      ],
    );
  }
  
}

效果图
flutter布局组件:wrap组件实现瀑布流_第1张图片

你可能感兴趣的:(页面布局)