第一百六十一回 Sliver综合示例

我们在上一章回中介绍了SliverPadding组件相关的内容，本章回中将介绍 Sliver综合示例.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在前面的章回中介绍了各种Sliver相关的组件：SliverList,SliverGrid，SliverAppBar和SliverPadding，本章回将综合使用它们。下面是示例程序的运行效果图。

不过在使用之前还需要介绍一个新组件：CustomScrollView。该组件相当于一个粘合剂，它可以把各个Sliver组件组合在一起。

使用方法

和其它组件类似，该组件提供了相关的属性来控制自己，下面是该组件中常用的属性，掌握这些属性后就可以使用该组件了。

• scrollDirection属性：主要用来控制列表中滚动方向；
• controller属性：主要用来控制某个列表的位置；
• slivers属性：主要用来存放Sliver相关的组件，它的用法类似Column组件中的children属性；

介绍完这些常用属性后，我们将在后面的小节中通过具体的示例代码来演示它的使用方法。

示例代码

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: const Text('Title of SliverAppBar'),
      backgroundColor: Colors.purpleAccent,
      ///关闭和展开时的高度
      collapsedHeight: 60,
      expandedHeight: 300,

      ///appBar空间扩展后显示的内容
      flexibleSpace: FlexibleSpaceBar(
        ///这个title在appBar的最下方,可以不设定，缩小后它会和SliverAppBar的title重合
        title: const Text('title of FlexibleSpaceBar'),
        background: Container(
          decoration: const BoxDecoration(
            image:DecorationImage(
              opacity: 0.8,
              image: AssetImage("images/ex.png"),
              fit: BoxFit.fill,
            ),
          ),
          ///扩展空间中主要显示的内容
          child: const Center(child: Text('child of container')),
        ),
        centerTitle: true,
        ///拉伸和折叠时的样式，效果不是很明显
        collapseMode: CollapseMode.pin,
        stretchModes: const [
          StretchMode.zoomBackground,
          StretchMode.blurBackground,
          StretchMode.fadeTitle,
        ],
      ),
    ),
    ///SliverAppBar下方显示的内容，这个需要和SliverAppBar一起添加，否则不会出现滑动效果
    ///这个只是一个简单的SliverList,用来配合SliverAppBar使用，真正的介绍在下面的程序中
    SliverList(
      delegate: SliverChildListDelegate(
      // List.generate(40, (index) => Icon(Icons.recommend),),
      List.generate(5, (index) => Text('Item ${index+1}'),),
      ),
    ),
    ///SliverGrid和工厂方法
    SliverGrid.count(
      ///交叉轴显示内容的数量，这里相当于3列
      crossAxisCount: 3,
      ///主轴上显示内容的空间设置,相当于行距
      mainAxisSpacing: 10,
      ///交叉轴上显示内容的空间设置,相当于列距
      crossAxisSpacing: 10,
      childAspectRatio: 1.2,
      ///Grid中显示的内容，一共9个自动换行，分3行显示
      children:List.generate(9, (index) {
        return Container(
          alignment: Alignment.center,
          ///使用固定颜色和随机颜色
          // color: Colors.redAccent,
          // color:Colors.primaries[index%5],
          ///修改为圆角，颜色移动到圆角中
          decoration: BoxDecoration(
            color: Colors.primaries[index%5],
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text('item: $index'),
        );
      }).toList(),
    ),
    ///不使用工厂方法，直接使用SliverGrid的构造方法
    SliverGrid(
      ///Grid中显示的内容,可以使用BuilderDelete直接创建显示内容，或者使用已经有的list
      delegate: SliverChildBuilderDelegate((context,index){
        return const Icon(Icons.face_3_outlined); },
      childCount: 20,
      ),
      ///配置Grid的相关属性，
      gridDelegate:const SliverGridDelegateWithFixedCrossAxisCount(
        ///主轴上显示内容的空间设置,相当于行距
        mainAxisExtent: 20,///这个值不能小于显示内容，否则最后一行的内容会被遮挡
        mainAxisSpacing: 20,
        ///交叉轴显示内容的数量，这里相当于4列
        crossAxisCount: 4,
        ///交叉轴上显示内容的空间设置
        crossAxisSpacing: 20,
        ///显示内容的宽高比
        childAspectRatio: 1.2,
      ),
    ),
    ///不使用工厂方法，直接使用SliverGrid的构造方法,和上一个类似，只是创建显示内容的方法不同
    SliverGrid(
      ///Grid中显示的内容,可以使用BuilderDelete直接创建显示内容，或者使用已经有的list
      delegate: SliverChildListDelegate(
        List.generate(20,
              (index) => const Icon(Icons.camera,color: Colors.blue,),),
      ),
      ///配置Grid的相关属性，同上。不同之处在于交叉轴显示内容的数量不固定，而是与空间有关
      gridDelegate:const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 40,
        mainAxisExtent: 40,
        mainAxisSpacing: 20,
        crossAxisSpacing: 5,
        childAspectRatio: 1.6,
      ),
    ),
    ///SliverList,可以理解为对ListView的封装，以便用于Sliver中创建delegate对象，使用builder方法。
    SliverList(
      delegate: SliverChildBuilderDelegate((context,index){
        return Container(
          height: 60,
          alignment: Alignment.center,
          child: Text('This is ${index+1} item'),
        );
      },
        ///list的数量
        childCount:5,
      ),
    ),
    ///与上面的SliverList类似，只是不有创建delegate对象，而是直接使用现成的list对象
    SliverList(
      delegate: SliverChildListDelegate(
        List.generate(5, (index) => const Icon(Icons.add),),
      ) ,
    ),
    ///调整显示内容的边距，在上下左右四个方向添加，SliverList，SliverList效果不明显
    SliverPadding(
     ///在上下左右四个方向上添加边距
     // padding: EdgeInsets.only(left: 10,right: 10),
     padding: const EdgeInsets.all(10),
     sliver:SliverList(
       delegate:SliverChildListDelegate(
         List.generate(5,
               (index) => Container(
                 color: Colors.grey,
                 child: Text('Item ${index+1}'),
               ),
         ),
       ) ,
     ) ,
    ),
    ///调整显示内容的边距，在上下左右四个方向添加，配合Grid内部的边距效果比较明显
    SliverPadding(
      padding: const EdgeInsets.all(10),
      sliver: SliverGrid.count(
        mainAxisSpacing: 10,
        crossAxisCount: 4,
        crossAxisSpacing: 10,
        children: List.generate(9, (index) => Container(
          alignment: Alignment.center,
          color: Colors.primaries[index%5],
          child: Text('Item ${index+1}'),
        ),) ,
      ),
    ),
  ],
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

上面是的代码中使用了前面章回中介绍过的所有与Sliver相关的组件，整个界面的外层使用CustomScollView当作容器，容器里的组件全部是SliVer相关的组件，最上方是SliverAppBar组件，它下面是SliverList和SliverGrid组件，向上滑动时SliverBar会被折叠，SliverList和SliverGrid会跟着一起滚动，不过它们是做为一个整体来滚动而不是像ListView中一个条目，一个条目地滚动。具体的滚动效果可以看开篇的程序运行效果图。

这个程序中包含的内容比较多，单是SliverList就有好几个，大家可以对比着看，建议大家自己动手去实践，这样可以真正体会到SliverList等组件的功能，以及它们包含的细节。

看官们，与"Sliver综合示例"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!