[Flutter] 流式布局列表

流式布局列表

SingleChildScrollView+Wrap

STEP01 : 生成wrap布局

Widget getItem() {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
            Padding(
                padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
                child: Wrap(
                    alignment: WrapAlignment.spaceEvenly,
                    spacing: 10,
                    children: List.generate(_list.length, (i) {
                        return i != _list.length - 1
                            ? ((i + 1) % 3 == 0  //判断是否为第三个，是的话使用长item，否则短item
                               ? _rectangleCardNotState(i)
                               : _squareCard(i))
                            : _getMoreWidget();
                    }),
                )),
        ],
    );
}

STEP02 : 再包裹SingleChildScrollView使其可以滚动

 _listCustom() {
     //若有另外一层数据比如“标题”，可使用ListView
    return SingleChildScrollView(
      controller: _scrollController,
      child: getItem(),
    );
  }

示例demo

ListView+Wrap

需要注意的是，遍历数据是在Wrap里面，虽然SingleChildScrollView一般不会去遍历数据。但像我这种小白，会傻乎乎的用ListView.buider+Wrap，然后在ListView.builder里遍历数据，传过来就只有一列一个Widget了，起不到wrap的效果。

还要说的是，ListView.builder+Wrap不是不能用，利用他们可以遍历两个层级的数据，如下面的数据格式，标题+内容。

这样就可以让ListView.builder遍历title，content层级，Wrap来遍历content里面的层级。

Data = [
  {
    "title": "经典选集",
    "content": [
      {"articleName": "倚天屠龙记", "author": "金庸"},
    ]
  },
  {
    "title": "网络小说",
    "content": [
      {"articleName": "斗破苍穹", "author": "天蚕土豆"},
    ]
  }
];

直接贴关键代码

class _MyHomePageState extends State<MyHomePage> {
    final List _list = Data;///将数据赋值给新的列表
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text(widget.title),
            ),
            ///ListView.builder
            body: ListView.builder(
                itemCount: _list.length,
                itemBuilder: (context, index) {
                    ///取得每个content值加到列表
                    List _contentList = _list[index]['content'];
                    return Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                            ///title
                            Container(
                                color: Colors.amber,
                                alignment: Alignment.bottomLeft,
                                child: Text(
                                    _list[index]['title'],
                                    style: TextStyle(fontSize: 20),
                                ),
                            ),
                            ///content
                            Container(
                                alignment: Alignment.centerLeft,
                                ///Wrap
                                child: Wrap(
                                    children: List.generate(_contentList.length, (index) {
                                        return Container(
                                            margin: EdgeInsets.all(10),
                                            height: 40,
                                            decoration: BoxDecoration(
                                                color: Colors.pinkAccent,
                                                border: Border.all(width: 1),
                                                borderRadius: BorderRadius.circular(12)),
                                            child: Padding(
                                                padding: const EdgeInsets.all(8.0),
                                                child: Text(
                                                    ///在content列表中取得articleName
                                                    _contentList[index]['articleName'],
                                                    style: TextStyle(color: Colors.white),
                                                ),
                                            ),
                                        );
                                    })),
                            )
                        ],
                    );
                }));
    }
}

示例demo