Flutter-Sliver

网格视图（Sliver）

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SliverDemo'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
              childAspectRatio: 1 // 控制该网格视图显示的比例
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index){
                return Container(
                  child: Image.network(
                    posts[index].imageUrl,
                    fit: BoxFit.cover,
                  ),
                );
              },
              childCount: posts.length
            ),
          ),
        ],
      ),
    );
  }
}

预览

SliverPadding（内边距）

SliverPadding主要为了给SliverGrid创造内边距

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SliverDemo'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPadding(
            padding: EdgeInsets.all(8),
            sliver: SliverGridDemo(),
          )
        ],
      ),
    );
  }
}

class SliverGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
        childAspectRatio: 1 // 控制该网格视图显示的比例
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index){
          return Container(
            child: Image.network(
              posts[index].imageUrl,
              fit: BoxFit.cover,
            ),
          );
        },
        childCount: posts.length
      ),
    );
  }
}

预览

SliverSafeArea（安全区）

让该网格视图显示在不被手机装饰所遮挡的地方

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SliverDemo'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverSafeArea(
            sliver: SliverPadding(
              padding: EdgeInsets.all(8),
              sliver: SliverGridDemo(),
            ),
          )
        ],
      ),
    );
  }
}

SliverList + ClipRRect（图片圆角）

class SliverListDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index){
          return Padding(
            padding: EdgeInsets.only(bottom: 32),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(12),
              child: Stack(
                children: <Widget>[
                  AspectRatio(
                    aspectRatio: 16/9,
                    child: Image.network(
                      posts[index].imageUrl,
                      fit: BoxFit.cover,
                    ),
                  ),
                  Positioned(
                    top: 32,
                    left: 32,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          posts[index].title,
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.white
                          ),
                        ),
                        Text(
                          posts[index].author,
                          style: TextStyle(
                            fontSize: 13,
                            color: Colors.white
                          ),
                        )
                      ],
                    ),
                  )
                ],
              )
            ),
          );
        },
        childCount: posts.length
      ),
    );
  }
}

预览

SliverAppBar（应用工具栏）

类似于AppBar的导航栏，在默认状态下，我们向下移动就会隐藏导航栏；而想要显示导航栏，必须滑动到页面顶部。

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar( // 类似于APPBar，但滑动到一定程度导航栏会隐藏
            title: Text('SliverDemo'),
            centerTitle: true, // 居中标题
            // pinned: true, // 将此属性设为true的话，导航栏就会固定在页面上部
            
            // 此属性默认为false，我们必须滑到页面顶部，导航栏才会显现；
            // 若为true，不管在什么位置，只要稍微向上滑动一点，导航栏就会显现
            // floating: true, 
          ), 
          SliverSafeArea( // 安全区
            sliver: SliverPadding( // Sliver视图的内边距
              padding: EdgeInsets.all(8),
              sliver: SliverListDemo(),
            ),
          )
        ],
      ),
    );
  }
}

待渐进动画的可伸缩空间

SliverAppBar( // 类似于APPBar，但滑动到一定程度导航栏会隐藏
  // title: Text('SliverDemo'),
  centerTitle: true, // 居中标题
  // pinned: true, // 将此属性设为true的话，导航栏就会固定在页面上部

  // 此属性默认为false，我们必须滑到页面顶部，导航栏才会显现；
  // 若为true，不管在什么位置，只要稍微向上滑动一点，导航栏就会显现
  // floating: true, 

  expandedHeight: 178, // 可伸缩控件的高度
  flexibleSpace: FlexibleSpaceBar( // 可伸缩空间的具体样式
    title: Text(
      'Ninghao Flutter'.toUpperCase(),
      style: TextStyle(
        fontSize: 15,
        letterSpacing: 3,
        fontWeight: FontWeight.w400
      ),
    ),
    background: Image.network( // 背景
      'https://resources.ninghao.org/images/overkill.png',
      fit: BoxFit.cover,
    ),
    centerTitle: true,
  ),
), 

预览