ListView GridView 嵌套-学习笔记

import 'dart:math';

import 'package:flutter/material.dart';

main() => runApp(Demo01App());

class Demo01App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RootPage();
  }
}

class RootPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("多列表"),
      ),
      body: BodyPage(),
    );
  }
}

class BodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: CustomScrollView(
        slivers: <Widget>[
          CustomGridView(),
        ],
      ),
    );
  }
}

class CustomGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
            childAspectRatio: 1.5,
            crossAxisCount: 2),
        delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
          return Container(
            color: Color.fromARGB(255, Random().nextInt(255),
                Random().nextInt(255), Random().nextInt(255)),
            child: Text("我是第$index个"),
          );
        }, childCount: 100));
  }
}

问题一、
当组件在安全区域并且没有 APPbar 的时候，listview 或者 GridView 并不能在上滑的时候将最上面的 Item，顶到屏幕最上面之后再消失，只能在安全区域内的最上面部分消失

所以，这种情况下最好是给SliverGrid 组件包裹 SliverSafeArea 组件

问题二、
需求上想给ListView 或者 GridView 的 Item 加上下左右边距，同时 ListView 或者 GridView 的最上面的 Item 距离最上面同样加上边距。
这时候是不能给 Item、ListView、GridView 加 Padding 或者加 Container（padding）等属性的，因为如果加这些组件的话，会出现ListView 或者 GridView 向上滚动的时候，最上面的边距会一直存在

解决方法：给 SliverGrid 组件添加一层SliverPadding 组件进行包裹

最终效果

import 'dart:math';

import 'package:flutter/material.dart';

main() => runApp(Demo01App());

class Demo01App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RootPage();
  }
}

class RootPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
//      appBar: AppBar(
//        title: Text("多列表"),
//      ),
      body: BodyPage(),
    );
  }
}

class BodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        /**
         * 这里的SliverAppBar 会自带一个 NavigationBar，所以如果一个页面如果有 SliverAppBar，Scaffold 的 AppBar可以不用了
         *  - pinned：这个属性是设定 SliverAppBar 的 NavigationBar 是否随滚动向上隐藏，默认为 true（隐藏），如果不需要设置为 false
         *  - expandedHeight:设置 NavigationBar 的高度
         *  - flexibleSpace:值一般为FlexibleSpaceBar对象，图片、文字等都是设置FlexibleSpaceBar的属性得到的
         *      FlexibleSpaceBar
         *        - title:NavigationBar 的标题
         *        - background：这是一个Widget，可以随意传想要展示的组件进去
         */
        SliverAppBar(
          expandedHeight: 300,
          flexibleSpace: FlexibleSpaceBar(
            title: Text("Hello Word"),
            background: Image.network("https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2514175862,3346224610&fm=26&gp=0.jpg",fit: BoxFit.cover,),
          ),
          pinned: true,
        ),
        sliverGridItem(),
        sliverLIstItem()
      ],
    );
  }
}

class sliverLIstItem extends StatelessWidget {
  const sliverLIstItem({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverList(
        delegate: SliverChildBuilderDelegate((BuildContext ctx, int index) {
      return ListTile(
        leading: Icon(Icons.people),
        title: Text("联系人$index"),
      );
    }, childCount: 10));
  }
}

class sliverGridItem extends StatelessWidget {
  const sliverGridItem({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverGrid(
        delegate: SliverChildBuilderDelegate((BuildContext ctx, int index) {
          return Container(
            color: Color.fromARGB(255, Random().nextInt(255),
                Random().nextInt(255), Random().nextInt(255)),
            child: Text("我是第$index个"),
          );
        }, childCount: 10),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisSpacing: 8,
            crossAxisCount: 2,
            mainAxisSpacing: 8,
            childAspectRatio: 1.5));
  }
}

class CustomScrollViewSliverGridView extends StatelessWidget {
  const CustomScrollViewSliverGridView({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverSafeArea(
      top: false,
      sliver: SliverPadding(
        padding: EdgeInsets.only(top: 10),
        sliver: SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                childAspectRatio: 1.5,
                crossAxisCount: 2),
            delegate:
                SliverChildBuilderDelegate((BuildContext context, int index) {
              return Container(
                color: Color.fromARGB(255, Random().nextInt(255),
                    Random().nextInt(255), Random().nextInt(255)),
                child: Text("我是第$index个"),
              );
            }, childCount: 100)),
      ),
    );
  }
}

QQ20200618-133925-HD.gif