Flutter warp 流式布局小案例实现

前言：

各位同学大家好，有一段时间没有给大家更新文章了， 最近写了一个flutter的warp流式布局的小案例。就想着分享给大家，那么废话不都说 我们我们正式开始

准备工作

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

效果图：

流式布局.gif

具体实现：

  @override
  Widget build(BuildContext context) {
    final width=MediaQuery.of(context).size.width;
    final height=MediaQuery.of(context).size.height;
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("warp 流式布局"),
      ),
      body: Center(
        child: Opacity(
          opacity: 0.8,
          child: Container(
            width: width,
            height: height/2,
            color:Colors.grey ,
            child: Wrap(
              children: list,
              spacing: 26.0,
            ),
          ),
        ),
      ),
    );
  }

首先我们 在Widget build 方法体里先获取屏幕的宽高

  final width=MediaQuery.of(context).size.width;
    final height=MediaQuery.of(context).size.height;

然后我们返回一个 Scaffold 脚手架框架组件 里面设置appbar

  return Scaffold(
      appBar: AppBar(
        title: Text("warp 流式布局"),
      ),
      body: Center(
        child: Opacity(
          opacity: 0.8,
          child: Container(
            width: width,
            height: height/2,
            color:Colors.grey ,
            child: Wrap(
              children: list,
              spacing: 26.0,
            ),
          ),
        ),
      ),
    );

我们Scaffold 里面body属性设置一个Center 组件使得内容居中 然后在Center组件中嵌套 Opacity 设置 opacity 属性为0.8 然我们在里面嵌套Container 组件 宽度设置屏幕宽带 高度为屏幕高度一半 然后我们在Container 组件里面嵌套 Wrap 组件 children 里面的显示内容来自我们的list数组

数据内容来源

List<Widget>list;
  @override
  void initState() {
    super.initState();
    list=List<Widget>()..add(buildAddButton());
  }

我们定义list数组返回widget buildAddButton（）

  Widget buildAddButton(){
    return GestureDetector(
       onTap: (){
         setState(() {
           if(list.length<9){
             list.insert(list.length-1, buildPhoto());
           }
         });
       },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child:Container(
          width: 80,
          height: 80,
          color: Colors.black54,
          child: Icon(
            Icons.add
          ),
        ),
      ),

    );
  }     

在 buildAddButton 方法中我们判断逻辑当 list 数组的长度 小于9的时候 我们就添加数据否则添加

  onTap: (){
         setState(() {
           if(list.length<9){
             list.insert(list.length-1, buildPhoto());
           }
         });
       },

这里的 buildPhoto 为添加的widget
buildPhoto（）方法里面就比较简单了 返回一个 Container 和组件宽高 都为80 然后里面嵌套一个text 组件

Widget  buildPhoto(){
  return Padding(
    padding:  const EdgeInsets.all(8.0),
    child: Container(
      width: 80,
      height: 80,
      color: Colors.amber,
      child: Center(
        child: Text("照片"),
      ),
    ),
  );
}

最后我们将list 赋值给我们的 Wrap 里面的 children 即可

  child: Wrap(
              children: list,
              spacing: 26.0,
            ),

到此整个flutter warp就讲完了

最后总结：

flutter中提供了比较好用的流水布局的组件 我们很容易就实现了上的效果需要特别主体的是在添加数据的时候一定要 调用 setState(() { }); 否则无法正常刷新UI 。有兴趣的同学可以继续深入研究做出更多花样的效果 ，我这里就不展开讲了 ,最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦

项目地址

码云：https://gitee.com/qiuyu123/flutter_warpdemo