Flutter开发（十一）—— 五种布局之Sliver滚动布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/RedKeyer/article/details/89552830

演示代码
以下代码中列举了Sliver关于SliverAppBar、SliverGrid、SliverList等组件属性的使用。

import 'package:flutter/material.dart';
import 'Animal.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SliverLayout(),
      theme: ThemeData(
        primarySwatch: Colors.deepPurple, //主题背景颜色
        highlightColor: Colors.purple, //按下按钮时 高亮颜色
        splashColor: Colors.white,
      ),
    );
  }
}

// Sliver
class SliverLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          // SliverAppBar 是可以跟随内容滚动的
          SliverAppBar(
            // title: Text('RedKey'),
            // pinned: true, //将标题固定在顶部

            floating: true, //标题随着滚动消失
            expandedHeight: 200.0, //伸展高度
            // flexibleSpace  可伸缩区域设置内容
            flexibleSpace: FlexibleSpaceBar(
              title: Text(
                'Redkeyset'.toUpperCase(), //toUpperCase()转成大写
                style: TextStyle(
                    fontSize: 18.0, //文字大小
                    letterSpacing: 2.5, //字间距
                    fontWeight: FontWeight.w400), //设置文字粗细
              ),
              // flexibleSpace 增加背景图片
              background:
                  Image.network('https://dwz.cn/xZbPzbOs', fit: BoxFit.cover),
            ),
          ),

          //安全区域显示，确保显示正常
          SliverSafeArea(
            sliver: SliverPadding(
              padding: EdgeInsets.all(8.0),
              // sliver: SliverGridDemo(),  //Grid
              sliver: SliverListDemo(), //List
            ),
          )
        ],
      ),
    );
  }
}

//  SliverGrid
class SliverGridDemo extends StatelessWidget {
  List<Animal> animals = Animal.allAnimal();
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, //每行2个item
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
        childAspectRatio: 1.5, // 长/宽的比例
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            child: Image.network(
              animals[index].image,
              fit: BoxFit.cover,
            ),
          );
        },
        childCount: animals.length, //如果这里不设置数量，默认是无限多，界面超出部分报错。
      ),
    );
  }
}

//  SliverList
class SliverListDemo extends StatelessWidget {
  List<Animal> animals = Animal.allAnimal();
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Padding(
            padding: EdgeInsets.only(bottom: 40.0), //仅设置底部有padding
            child: Material(
              borderRadius: BorderRadius.circular(16.0), //设置Material倒角16.0
              elevation: 20.0, //设置阴影高度10.0
              shadowColor: Colors.grey.withOpacity(0.5), //设置阴影颜色，灰色透明度0.3
              // 使用层叠布局，图片上面还有文字
              child: Stack(
                children: <Widget>[
                  // AspectRatio 调整child到设置的宽高比
                  AspectRatio(
                    aspectRatio: 18 / 9, //指定长高比例
                    child: Container(
                      decoration: new BoxDecoration(
                        // border设置边框
                        border: new Border.all(width: 2.0, color: Colors.red),
                        //设置Container倒角16.0
                        borderRadius: BorderRadius.circular(16.0),
                        image: new DecorationImage(
                            image: new NetworkImage(
                              animals[index].image,
                            ),
                            fit: BoxFit.cover),
                      ),
                    ),
                  ),

                  //  Positioned控件主要用来设置绝对布局，必须配合Stack控件来使用
                  Positioned(
                    right: 20,
                    bottom: 20,
                    child: Column(
                      //纵向布局
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(animals[index].name,
                            style: TextStyle(
                              fontSize: 18.0,
                              color: Colors.orangeAccent,
                            )),
                        Text(animals[index].description,
                            style: TextStyle(
                              fontSize: 14.0,
                              color: Colors.purpleAccent,
                            )),
                      ],
                    ),
                  )
                ],
              ),
            ),
          );
        },
        childCount: animals.length, //如果这里不设置数量，默认是无限多，界面超出部分报错。
      ),
    );
  }
}

效果演示：