Flutter实践3-流式布局和瀑布流效果

上篇：Flutter实践2-底部tab页面切换、轮播图、横向滑动列表_和阳光说晚安/Waiting on the corner-CSDN博客Flutter的底部tab切换是依靠Scaffold里面的BottomNavigationBar属性来实现的，当然，自定义tab切换控件也是完全ok的，只不过flutter对于常用的交互封装一般都会有，不需要自定义就能满足绝大部分用户需求https://blog.csdn.net/qq998701/article/details/122310973

     一、   流式布局 在实际开发过程中也算是比较常见的一种布局，在使控件横向排列的时候，我们经常使用的是Row控件，但是如果Row里面的子 widget 超出屏幕范围，则会报溢出错误。这个时候如果我们希望子控件能自动换行，从下一行开始继续排列，那Row是满足不了我们的要求了，只能通过Wrap控件来实现。官方介绍：4.5 流式布局 | 《Flutter实战·第二版》- Preview 

   wrap里面只需要传入children参数就可以；

/// 流式布局
 Wrap(children: BuildItem.buildWrapItems())

   

单独写了一个生成wrap子控件的方法，deoration是设置背景样式，这个属性是Container里面的。

  static List buildWrapItems() {
    List items = [];
    for (int i = 0; i < 20; i++) {
      items.add(Container(
        margin: EdgeInsets.fromLTRB(0, 0, 10, 10),
        padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
        child: Text(
          "Item$i",
          style: TextStyle(color: Colors.white),
        ), 
        decoration: ShapeDecoration(
            color: Colors.blue,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(5))),
      ));
    }
    return items;
  }

效果图如下：

 二、瀑布流：

我们先上一个瀑布流效果看看：

 要实现这个瀑布流效果，可以借助一个开源库，

waterfall_flow: ^3.0.2

代码实现：

 好了， 如有其它疑问，欢迎留言评论，有问必答。

有需要查看具体代码的：

GitHub - gugu0087/fluttercsdn: csdn