flutter - 使用 Wrap 实现自定义元素大小的网格布局，代替GridView 部件

最新推荐文章于 2023-11-07 10:14:10 发布

素燃

最新推荐文章于 2023-11-07 10:14:10 发布

阅读量842

点赞数

分类专栏： Flutter 文章标签： Warp，GridView

总结不易，转载请说明出处哦!

本文链接：https://blog.csdn.net/qq_36407748/article/details/109178486

版权

Flutter 专栏收录该内容

16 篇文章 6 订阅

订阅专栏

使用 Wrap 代替 GridView 实现网格布局，并且可以实现自定义元素的大小

在这里插入图片描述

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取设备的宽度
    var width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),
      ),
      backgroundColor: Color(0xfff1f1f1),
      body: ListView(
        children: [
          Container(
            height: 200,
            color: Colors.black12,
            child: Center(child: Text("顶部")),
          ),
          Container(
            height: 300,
            margin: EdgeInsets.only(top: 20),
            width: double.infinity,
            child: Wrap(
              children: _createGridViewItem(width),
            ),
          )
        ],
      ),
    );
  }
  _createGridViewItem(width) {
    List<Widget> list = [];
    for (var i = 0; i < 18; i++) {
     // 你想分几列，就除以几， 高度可以进行自定义
      list.add(Container(
        width: width / 4,
        height: 50,
        color: Colors.primaries[i],
      ));
    }
    return list;
  }
}