flutter - 滚动组件 ListView 和 GridView 一块使用

最新推荐文章于 2024-05-24 10:54:36 发布

素燃

最新推荐文章于 2024-05-24 10:54:36 发布

阅读量526

点赞数

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

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

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

版权

Flutter 专栏收录该内容

16 篇文章 6 订阅

订阅专栏

在这里插入图片描述

1. ListView 和 GridView 组合一块滚动

问题： GridView 里的元素不能设置大小，只能通过修改 childAspectRatio 来控制宽高比

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    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),
            child: GridView(
              // 设置滚动的方式
              physics: NeverScrollableScrollPhysics(), // 禁止滚动
              padding: EdgeInsets.all(0),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
              ),
              children: [
                _createGridViewItem(Colors.primaries[0]),
                _createGridViewItem(Colors.primaries[1]),
                _createGridViewItem(Colors.primaries[2]),
                _createGridViewItem(Colors.primaries[3]),
                _createGridViewItem(Colors.primaries[4]),
                _createGridViewItem(Colors.primaries[5]),
                _createGridViewItem(Colors.primaries[6]),
                _createGridViewItem(Colors.primaries[7]),
                _createGridViewItem(Colors.primaries[8]),
              ],
            ),
          )
        ],
      ),
    );
  }

  _createGridViewItem(Color color) {
    return Container(
      color: color,
    );
  }
}