重新構(gòu)建嵌套列表

這一節(jié)使用 Slivers 而不是 ListViews 重建相同的 UI。

前奏在這里

??https://blog.51cto.com/jianguo/4653002??

使用 Slivers 的列表列表

下面的代碼構(gòu)建了與之前相同的 UI，但這次它使用??Slivers?? 而不是收縮包裝??ListView??對象。本頁的其余部分將引導(dǎo)您逐步完成更改。

如何將嵌套列表遷移到 Slivers

flutter

第1步

首先，將最外面的 ListView 更改為??SliverList??.

// Before

@override

Widget build(BuildContext context) {

  return ListView.builder(

    itemCount: numberOfLists,

    itemBuilder: (context, index) => innerLists[index],

  );

}

變成：

// After

@override

Widget build(BuildContext context) {

  return CustomScrollView(slivers: innerLists);

}

第2步

其次，將內(nèi)部列表的類型從??List??更改為 ??List??。

// Before

List innerLists = [];

變成：

// After

List innerLists = [];

第 3 步

現(xiàn)在是時候重建內(nèi)部列表了。的??SliverList??類是比原始略有不同??ListView??的類，與主要差異是的外觀??delegate??。原始版本?


?ListView??對所有內(nèi)容都使用對象，不知道內(nèi)部構(gòu)建器構(gòu)造函數(shù)將被??shrinkWrap??.

// Before

@override

void initState() {

  super.initState();

  for (int i = 0; i < numberOfLists; i++) {

    final _innerList = [];

    for (int j = 0; j < numberOfItemsPerList; j++) {

      _innerList.add(const ColorRow());

    }

    innerLists.add(

      ListView.builder(

        itemCount: numberOfItemsPerList,

        itemBuilder: (BuildContext context, int index) => _innerList[index],

        shrinkWrap: true,

        physics: const NeverScrollableScrollPhysics(),

      ),

    );

  }

}

更改后，??ListView??對象被替換為??SliverList??對象，每個對象都使用一個??SliverChildBuilderDelegate??來提供高效的按需構(gòu)建。

// After

@override

void initState() {

  super.initState();

  for (int i = 0; i < numLists; i++) {

    final _innerList = [];

    for (int j = 0; j < numberOfItemsPerList; j++) {

      _innerList.add(const ColorRow());

    }

    innerLists.add(

      SliverList(

        delegate: SliverChildBuilderDelegate(

          (BuildContext context, int index) => _innerList[index],

          childCount: numberOfItemsPerList,

        ),

      ),

    );

  }

}

完整代碼：

import package:flutter/material.dart;

import dart:math as math;



void main() {

  runApp(SliversApp());

}



class SliversApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      title: ShrinkWrap vs Slivers,

      home: Scaffold(

        appBar: AppBar(

          title: const Text("Revenge of the Slivers"),

        ),

        body: const ShrinkWrapSlivers(),

      ),

    );

  }

}



class ShrinkWrapSlivers extends StatefulWidget {

  const ShrinkWrapSlivers({

    Key? key,

  }) : super(key: key);



  @override

  _ShrinkWrapSliversState createState() => _ShrinkWrapSliversState();

}



class _ShrinkWrapSliversState extends State {

  List innerLists = [];

  final numLists = 15;

  final numberOfItemsPerList = 100;



  @override

  void initState() {

    super.initState();

    for (int i = 0; i < numLists; i++) {

      final _innerList = [];

      for (int j = 0; j < numberOfItemsPerList; j++) {

        _innerList.add(const ColorRow());

      }

      innerLists.add(

        SliverList(

          delegate: SliverChildBuilderDelegate(

            (BuildContext context, int index) => _innerList[index],

            childCount: numberOfItemsPerList,

          ),

        ),

      );

    }

  }



  @override

  Widget build(BuildContext context) {

    return CustomScrollView(slivers: innerLists);

  }

}



@immutable

class ColorRow extends StatefulWidget {

  const ColorRow({Key? key}) : super(key: key);



  @override

  State createState() => ColorRowState();

}



class ColorRowState extends State {

  Color? color;



  @override

  void initState() {

    super.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/124254.html

相關(guān)文章

  • flutter 中的列表的性能優(yōu)化前奏#yyds干貨盤點#

    摘要：只有內(nèi)部列表需要設(shè)置。中的列表的性能優(yōu)化前奏干貨盤點而且你滑動的快的時候列表會抖動重新構(gòu)建嵌套列表要了解如何使您的用戶免受卡頓威脅，請等待我的第二節(jié)，下一節(jié)將使用而不是重建相同的。 這里是堅果前端小課堂，大家喜歡的話，可以關(guān)注我的公眾號堅果前端，，或者加我好友，獲取更多精彩內(nèi)容嵌套列表 - ShrinkWrap 與 Sli...

    番茄西紅柿 評論0 收藏2637

  • Flutter 中輪播圖詳解[Flutter專題31]#yyds干貨盤點#

    在 Flutter 中創(chuàng)建圖像輪播 從社交媒體應(yīng)用程序到電子商務(wù)應(yīng)用程序，大多數(shù)現(xiàn)代應(yīng)用程序都有某種圖像輪播來展示產(chǎn)品、圖像或廣告。 由于 flutter 提供的內(nèi)置小部件，從頭開始實現(xiàn)圖像輪播并不像您想象的那么難。 在本文中，您將學(xué)習(xí)如何從頭開始創(chuàng)建圖像輪播并根據(jù)需要進行自定義。最后，您將學(xué)習(xí)如何使用carousel_slider插件以更少的代碼創(chuàng)建圖像輪播。 這些是我...

    番茄西紅柿 評論0 收藏2637

  • Flutter — 加快開發(fā)速度的 IDE 快捷操作#yyds干貨盤點#

    摘要：夏天加快開發(fā)速度的快捷操作干貨盤點快捷方式你可以用做更多神奇的事情選項返回這是您在中加快開發(fā)速度的魔杖。加快開發(fā)速度的快捷操作干貨盤點選項卡不喜歡小部件用魔術(shù)棒取下它。 Flutter — 加快開發(fā)速度的 IDE 快捷方式上一個關(guān)于??vscode 的插件??推薦大家看的過癮不，今天繼續(xù)給大家?guī)硪恍╆P(guān)于android s...

    番茄西紅柿 評論0 收藏2637

  • #yyds干貨盤點#Flutter 如何禁止手機橫屏[Flutter專題32]

    摘要：最后如果不起作用，可以分別做如下設(shè)置干貨盤點如何禁止手機橫屏專題橫屏安卓如下所示干貨盤點如何禁止手機橫屏專題另外上有個插件可以去試一下，我在這兒就不做解釋了。 這里是堅果前端小課堂，歡迎關(guān)注公眾號堅果前端，問題引出 群友發(fā)來問題： Flutter 怎么禁止橫屏顯示呀，網(wǎng)上說的幾個方法 都沒有效 ...

    番茄西紅柿 評論0 收藏2637

  • 【Flutter 專題】15 圖解 ListView 異步加載數(shù)據(jù)與等待 #yyds干貨盤點#

    摘要：小菜前兩天再學(xué)時，整理了一下在列表中展示多種不同樣式，今天繼續(xù)深入學(xué)習(xí)異步請求數(shù)據(jù)并加載新聞列表以及初始進入頁面的等小知識點。小菜剛接觸時間不長，還有很多不清楚和不理解的地方，如果又不對的地方還希望多多指出。 小菜前兩天再學(xué) ListView 時，整理了一下在列表中展示多種不同 item 樣式，今天繼續(xù)深入學(xué)習(xí)...

    番茄西紅柿 評論0 收藏2637

發(fā)表評論

0條評論

最新活動