重新構建嵌套列表

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

前奏在這里

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

使用 Slivers 的列表列表

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

如何將嵌套列表遷移到 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步

其次，將內部列表的類型從??List??更改為 ??List??。

// Before

List innerLists = [];

變成：

// After

List innerLists = [];

第 3 步

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


?ListView??對所有內容都使用對象，不知道內部構建器構造函數將被??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??來提供高效的按需構建。

// 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.

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/124254.html

相關文章

  • flutter 中的列表的性能優化前奏#yyds干貨盤點#

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

    番茄西紅柿 評論0 收藏2637

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

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

    番茄西紅柿 評論0 收藏2637

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

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

    番茄西紅柿 評論0 收藏2637

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

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

    番茄西紅柿 評論0 收藏2637

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

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

    番茄西紅柿 評論0 收藏2637

發表評論

0條評論

最新活動