概念介紹

我們?cè)谇懊娴恼禄刂薪榻B了各種Sliver相關(guān)的組件：SliverList,SliverGrid，SliverAppBar和SliverPadding，本章回將綜合使用它們。下面是示例程序的
運(yùn)行效果圖。不過(guò)在使用之前還需要介紹一個(gè)新組件：CustomScrollView。該組件相當(dāng)于一個(gè)粘合劑，它可以把各個(gè)Sliver組件組合在一起。010slivers

使用方法

和其它組件類似，該組件提供了相關(guān)的屬性來(lái)控制自己，
下面是該組件中常用的屬性，掌握這些屬性后就可以使用該組件了。

• scrollDirection屬性：主要用來(lái)控制列表中滾動(dòng)方向；
• controller屬性：主要用來(lái)控制某個(gè)列表的位置；
• slivers屬性：主要用來(lái)存放Sliver相關(guān)的組件，它的用法類似Column組件中的children屬性；
  介紹完這些常用屬性后，我們將在后面的小節(jié)中通過(guò)具體的示例代碼來(lái)演示它的使用方法。

示例代碼

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: const Text('Title of SliverAppBar'),
      backgroundColor: Colors.purpleAccent,
      ///關(guān)閉和展開時(shí)的高度
      collapsedHeight: 60,
      expandedHeight: 300,

      ///appBar空間擴(kuò)展后顯示的內(nèi)容
      flexibleSpace: FlexibleSpaceBar(
        ///這個(gè)title在appBar的最下方,可以不設(shè)定，縮小后它會(huì)和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,
            ),
          ),
          ///擴(kuò)展空間中主要顯示的內(nèi)容
          child: const Center(child: Text('child of container')),
        ),
        centerTitle: true,
        ///拉伸和折疊時(shí)的樣式，效果不是很明顯
        collapseMode: CollapseMode.pin,
        stretchModes: const [
          StretchMode.zoomBackground,
          StretchMode.blurBackground,
          StretchMode.fadeTitle,
        ],
      ),
    ),
    ///SliverAppBar下方顯示的內(nèi)容，這個(gè)需要和SliverAppBar一起添加，否則不會(huì)出現(xiàn)滑動(dòng)效果
    ///這個(gè)只是一個(gè)簡(jiǎn)單的SliverList,用來(lái)配合SliverAppBar使用，真正的介紹在下面的程序中
    SliverList(
      delegate: SliverChildListDelegate(
      // List.generate(40, (index) => Icon(Icons.recommend),),
      List.generate(5, (index) => Text('Item ${index+1}'),),
      ),
    ),
    ///SliverGrid和工廠方法
    SliverGrid.count(
      ///交叉軸顯示內(nèi)容的數(shù)量，這里相當(dāng)于3列
      crossAxisCount: 3,
      ///主軸上顯示內(nèi)容的空間設(shè)置,相當(dāng)于行距
      mainAxisSpacing: 10,
      ///交叉軸上顯示內(nèi)容的空間設(shè)置,相當(dāng)于列距
      crossAxisSpacing: 10,
      childAspectRatio: 1.2,
      ///Grid中顯示的內(nèi)容，一共9個(gè)自動(dòng)換行，分3行顯示
      children:List.generate(9, (index) {
        return Container(
          alignment: Alignment.center,
          ///使用固定顏色和隨機(jī)顏色
          // color: Colors.redAccent,
          // color:Colors.primaries[index%5],
          ///修改為圓角，顏色移動(dòng)到圓角中
          decoration: BoxDecoration(
            color: Colors.primaries[index%5],
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text('item: $index'),
        );
      }).toList(),
    ),
    ///不使用工廠方法，直接使用SliverGrid的構(gòu)造方法
    SliverGrid(
      ///Grid中顯示的內(nèi)容,可以使用BuilderDelete直接創(chuàng)建顯示內(nèi)容，或者使用已經(jīng)有的list
      delegate: SliverChildBuilderDelegate((context,index){
        return const Icon(Icons.face_3_outlined); },
      childCount: 20,
      ),
      ///配置Grid的相關(guān)屬性，
      gridDelegate:const SliverGridDelegateWithFixedCrossAxisCount(
        ///主軸上顯示內(nèi)容的空間設(shè)置,相當(dāng)于行距
        mainAxisExtent: 20,///這個(gè)值不能小于顯示內(nèi)容，否則最后一行的內(nèi)容會(huì)被遮擋
        mainAxisSpacing: 20,
        ///交叉軸顯示內(nèi)容的數(shù)量，這里相當(dāng)于4列
        crossAxisCount: 4,
        ///交叉軸上顯示內(nèi)容的空間設(shè)置
        crossAxisSpacing: 20,
        ///顯示內(nèi)容的寬高比
        childAspectRatio: 1.2,
      ),
    ),
    ///不使用工廠方法，直接使用SliverGrid的構(gòu)造方法,和上一個(gè)類似，只是創(chuàng)建顯示內(nèi)容的方法不同
    SliverGrid(
      ///Grid中顯示的內(nèi)容,可以使用BuilderDelete直接創(chuàng)建顯示內(nèi)容，或者使用已經(jīng)有的list
      delegate: SliverChildListDelegate(
        List.generate(20,
              (index) => const Icon(Icons.camera,color: Colors.blue,),),
      ),
      ///配置Grid的相關(guān)屬性，同上。不同之處在于交叉軸顯示內(nèi)容的數(shù)量不固定，而是與空間有關(guān)
      gridDelegate:const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 40,
        mainAxisExtent: 40,
        mainAxisSpacing: 20,
        crossAxisSpacing: 5,
        childAspectRatio: 1.6,
      ),
    ),
    ///SliverList,可以理解為對(duì)ListView的封裝，以便用于Sliver中創(chuàng)建delegate對(duì)象，使用builder方法。
    SliverList(
      delegate: SliverChildBuilderDelegate((context,index){
        return Container(
          height: 60,
          alignment: Alignment.center,
          child: Text('This is ${index+1} item'),
        );
      },
        ///list的數(shù)量
        childCount:5,
      ),
    ),
    ///與上面的SliverList類似，只是不有創(chuàng)建delegate對(duì)象，而是直接使用現(xiàn)成的list對(duì)象
    SliverList(
      delegate: SliverChildListDelegate(
        List.generate(5, (index) => const Icon(Icons.add),),
      ) ,
    ),
    ///調(diào)整顯示內(nèi)容的邊距，在上下左右四個(gè)方向添加，SliverList，SliverList效果不明顯
    SliverPadding(
     ///在上下左右四個(gè)方向上添加邊距
     // 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}'),
               ),
         ),
       ) ,
     ) ,
    ),
    ///調(diào)整顯示內(nèi)容的邊距，在上下左右四個(gè)方向添加，配合Grid內(nèi)部的邊距效果比較明顯
    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}'),
        ),) ,
      ),
    ),
  ],
),

上面是的代碼中使用了前面章回中介紹過(guò)的所有與Sliver相關(guān)的組件，整個(gè)界面的外層使用CustomScollView當(dāng)作容器，容器里的組件全部是SliVer相關(guān)的組件，最
上方是SliverAppBar組件，它下面是SliverList和SliverGrid組件，向上滑動(dòng)時(shí)SliverBar會(huì)被折疊，SliverList和SliverGrid會(huì)跟著一起滾動(dòng)，不過(guò)它們
是做為一個(gè)整體來(lái)滾動(dòng)而不是像ListView中一個(gè)條目，一個(gè)條目地滾動(dòng)。具體的滾動(dòng)效果可以看開篇的程序運(yùn)行效果圖。這個(gè)程序中包含的內(nèi)容比較多，單是SliverList
就有好幾個(gè)，大家可以對(duì)比著看，建議大家自己動(dòng)手去實(shí)踐，這樣可以真正體會(huì)到SliverList等組件的功能，以及它們包含的細(xì)節(jié)。
看官們，與"Sliver綜合示例"相關(guān)的內(nèi)容就介紹到這里，歡迎大家在評(píng)論區(qū)交流與討論!文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-802289.html

到了這里，關(guān)于第二百六十四回的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！