加载列表时如何处理庞大的数组？

问题描述

你好朋友告诉我如何在应用程序中处理大型数组我在每个列表中有9种不同类型的数组列表22个单词是声音和图像。图像存储在资产文件夹中的大小只有1.5 mb，声音来自Firebase云存储问题是当应用加载时，它会降低我的应用性能，请告诉我如何在运行时向我展示如何对其进行优化

I/Choreographer(25037): Skipped 107 frames!  The application may be doing too much work on its main thread.
I/Choreographer(25037): Skipped 3 frames!  The application may be doing too much work on its main thread.
I/Choreographer(25037): Skipped 8 frames!  The application may be doing too much work on its main thread.
I/Choreographer(25037): Skipped 6 frames!  The application may be doing too much work on its main thread.
I/Choreographer(25037): Skipped 3 frames!  The application may be doing too much work on its main thread.

但是有效，我需要对其进行优化，这是我的数组代码

import 'package:flutter/material.dart';
import 'package:hebrew/Deteilpage.dart';
import 'package:google_fonts/google_fonts.dart';
void main() => runApp(MyApp()
);

class MyApp extends StatelessWidget {


  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner:false,theme: ThemeData(
        appBarTheme: AppBarTheme(color: Colors.green),primarySwatch: Colors.purple,),home: MyHomePage(),);
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
   var  hebrewword=['א','בּ','ג','ד','ה','ו','ז','ח','ט','י ','כּ','ל','מ','נ','ס ','ע','פּ','צ','ק','ר','שׁ','ת'];
   var imagelist=['images/a.jpg','images/b.jpg','images/c.jpg','images/d.jpg','images/e.jpg','images/f.jpg','images/g.jpg','images/h.png','images/i.jpg','images/j.jpg','images/k.jpg','images/l.jpg','images/m.jpg','images/n.jpg','images/o.jpg','images/p.jpg','images/q.jpg','images/r.png','images/s.png','images/t.jpg','images/u.jpg','images/v.jpg'];
    var romanurduword=['Aleph','Beit','Gimel','Dalet','Hey','Vav','Zayin','Khet','Tet','Yod','Kaf','Lamed','Mem','Nun','Samekh','Ayin','Peh','Tsade','Qof','Resh','Shin','Tav'];
    var englishword=[
      'Alpeh is for A-BA(Father)','Beith is for Bah-yeet (House)','Gimel is for Glida (Ice-cream)','Dalet is for delet ( Door )','Hey is for Ha.le.lu.Ya (worship)','Vav is for Vanil (Vanilla)','Zayin for Zebra','Khet is for Cho desh (month)','Tet is for Tallith (Prayer Shawl)','Yod is for Yada & im','Kaf is for KEH-lehv (Dog)','Lamed for lechem(bread)','Mem is for MAH-goh','Nun is for Ner ( lamp)','Samekh is for Sus ( Horse)','Ayin is for etz ( tree)','Peh is for Perakh ( Bud)','Tsade is for tzitzit','Qof is for Qaseth ( Bow & arrow )','Resh is for ROHSH (Head)','Shin is for Shofar','Tav is for torah'

    ];
var hebrewprounce=['אלֶף ','בּית','גָימֵל','דָּלֶת','הֵא','וָו','זַיִן','חֵת','טֵית','יוֹד','כַּף','לָמֶד','מֵם','נוּן','סָמֶך','עַיִן','פֵּא','צַרִי','קוֹף','רֵישׁ','שִׁין','תָיו'];

var audio=['aleph.mp3','beth.mpeg','gimel.mpeg','dalet.mpeg','hey.mpeg','vav.mpeg','zayin.mpeg','khet.mpeg','tet.mpeg','yod.mpeg','kaf.mpeg','lamed.mpeg','mem.mpeg','nun.mpeg','samekh.mpeg','ayin.mpeg','peh.mpeg','psade.mpeg','qof.mpeg','resh.mpeg','shin.mpeg','tav.mpeg'
];

var hebrewexplain=[

  'אַבָּא','בָּיִת','גֶּלִידָה',' דֶּלֶת ','הַלְלוּ-יָהּ','ןנִיל','זֶבְּרָה',' חוֹדֶּשׁ','טַלִּית','  יָדָיִים',' כֶּלֶב ','לֶחֶם','מַנְגּוֹ','נֵר','סוּס','עֵץ','פֶּרַח','צִיצִת','קָשֶׁת','ראֹשׁ','שׁוֹפָר','תּוֹרָה'];


var urdu=['آلیف','بیت ','گیمیل','دایت','ہے','و ','زائن','خیت','طیت','یود','کاف','لامیدھ','میم','نُون','سامیخ ','عائن','پے','صادی ','قوف','ریش ','شین ','تاؤ'];

var urdumeaning=['آلیف سے ابا(باپ)','بیت سے بایت(گھر)','گمیل سے گلیدہ(آئس کریم)','دایت سے دالیت(دروازہ)','ہے سے ہالیلویاہ(حمد و ثنا)','و سے ونیل(ونیلا)','زائن سے زیبرا(زیبرا)','خیت سے خوہدش(مہینہ)','طیت سے طالیت(دعا ئیہ پوشاک)','یود سے یادیم(ہاتھوں)','کاف سے کیلیو(کتا)','لامید سے لخییم(روٹی)','میم سے مینگواہ(آم)','نُون سے نَیر(چراغ)','سامیخ سے ثوث(گھوڑا)','عائن سے ایص(درخت)','پے سے پیرخ(کلی)','صادی سے صیعیت(جھالر)','قوف سے قاشیت(کمان)','ریش سے روشش(سر)','شین سے شوفار(نرسنگا)','تاؤ سے توراہ(توریت)'
];

var urduword=['اردو  مماثل:ا','اردو  مماثل:ب','اردو  مماثل:گ','اردو  مماثل:د','اردو  مماثل:ہ','اردو  مماثل:و','اردو  مماثل:ز','اردو  مماثل:خ','اردو  مماثل:ط','اردو  مماثل:ی','اردو  مماثل:ک','اردو  مماثل:ل','اردو  مماثل:م','اردو  مماثل:ن','اردو  مماثل:س /ص','اردو  مماثل:ع','اردو  مماثل:پ','اردو  مماثل:ص','اردو  مماثل:ق','اردو  مماثل:ر','اردو  مماثل: ش','اردو  مماثل:ت'
];
   @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: AppBar(
        title: Text('Hebrew Learning'),body: new ListView.builder(
        itemCount: hebrewword.length,itemBuilder: (context,i) {
          return  GestureDetector(
            onTap: (){
              Navigator.push(context,MaterialPageRoute(builder: (context) => DetailPage(hebrewword[i],imagelist[i],englishword[i],audio[i],urdumeaning[i],urduword[i],romanurduword[i],urdu[i])));
            },child: Container(

              child: Card(
//                color: Colors.blue,child: Row(
                  children: <Widget>[
                    GestureDetector(
                      onTap: () {
                        Navigator.push(context,urdu[i])));
                      },child: Container(

                        child: Column(
                          children: [
                            Directionality(
                              textDirection: TextDirection.rtl,child: Text(hebrewword[i],style:GoogleFonts.davidLibre(
                                fontSize: 40,Image.asset(imagelist[i],height: 100,width: 80,Text(englishword[i],style: TextStyle(

                              fontSize: 14,fontWeight: FontWeight.bold,Text('',style: TextStyle(
                              fontSize: 14,color: Colors.red,],Flexible(
                      child: Container(
                          padding: EdgeInsets.fromLTRB(5.0,0.0,0.0),child: Column(
                            children: [
                              Row(
                                children: [
                                  Text(
                                    romanurduword[i],style: TextStyle(
                                    fontSize: 18,)
                                  ),Text(' / '+
                                      urdu[i],style:GoogleFonts.notoSerif (
                                    fontSize: 18,Directionality(
                                textDirection: TextDirection.rtl,child: Text(
                                    hebrewprounce[i],style:GoogleFonts.davidLibre(
                                  fontSize: 26,)
                                ),Text(urduword[i],style:GoogleFonts.notoSerif (
                                fontSize: 18,)
                              ),SizedBox(height: 20,child: Text(
                                    hebrewexplain[i],style:GoogleFonts.davidLibre(
                                  fontSize: 20,child: Text(
                                    urdumeaning[i],style:GoogleFonts.notoSerif(
                                  fontSize: 14,)
                            ],)),);
        },);
  }
}

解决方法

您可以使用Sliver小部件来代替ListView.builder。 ListVew wideget将立即构建所有窗口小部件，而使用Sliver窗口小部件则可以在用户滚动屏幕时构建窗口小部件。请参阅下面的示例代码。

class MyApp extends StatefulWidget {
      @override
      MyAppState createState() => MyAppState();
    }
    
    class MyAppState extends State<MyApp> {
      List<String> list = ['Title 1','Title 2','Title 3','Title 4','Title 5','Title 6','Title 7','Title 8','Title 9','Title 10','Title 11','Title 12','Title 13','Title 14','Title 15','Title 16','Title 17','Title 18','Title 19','Title 20'];
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                body: CustomScrollView(
                    //key: PageStorageKey<String>(myKey),slivers: <Widget>[
                      SliverAppBar(
                        title: Text('Test'),),_getSlivers(list,context),]
                  ),));
      }
    
      SliverList _getSlivers(List myList,BuildContext context) {
        return SliverList(
          delegate: SliverChildBuilderDelegate(
                (BuildContext context,int index) {
              return buildRow(myList[index]);
            },childCount: myList.length,);
      }
    
      buildRow(String title) {
        return Padding(padding: const EdgeInsets.all(15.0),child: Text(title,style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0)));
      }
    }