flutter - 使用 SingleChildScrollView 进行滚动布局，实现和 Warp 和LiestView 组合的效果

最新推荐文章于 2023-12-15 13:40:42 发布

素燃

最新推荐文章于 2023-12-15 13:40:42 发布

阅读量1.2k

点赞数

分类专栏： Flutter 文章标签： SingleChild ScrollView

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

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

版权

Flutter 专栏收录该内容

16 篇文章 6 订阅

订阅专栏

该部件不能嵌套其它的滚动部件 - ListView，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(0xFFcccccc),
      body: SingleChildScrollView(
        child: Column(
          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;
  }
}