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: <Widget>[
        BlueButton("算死草"),
        BlueButton("喜剧之王"),
        BlueButton("唐伯虎点秋香"),
        BlueButton("无敌破坏王"),
        BlueButton("逃学威龙"),
        BlueButton("少林足球"),
        BlueButton("算死草"),
        BlueButton("喜剧之王"),
        BlueButton("唐伯虎点秋香"),
        BlueButton("无敌破坏王"),
        BlueButton("逃学威龙"),
        BlueButton("少林足球"),
      ],
    );
  }
  
}
经验分享 程序员 微信小程序 职场和发展