• 聲明List
• 通過MyApp這個Demo傳遞一個參數(shù)
• 接收外部傳遞的參數(shù)
• ListView.builder() 動態(tài)構(gòu)建

聲明List

之前寫的ListView組件的基本使用方法,但是內(nèi)容和數(shù)據(jù)都是寫死的,在實際項目中,我們的List的數(shù)據(jù)都是通過接口獲取的.所以這一篇主要學(xué)習(xí)動態(tài)列表

通過MyApp這個Demo傳遞一個參數(shù)

現(xiàn)在我們需要在入口組件MyApp中傳入一個List,那么需要先聲明一個List

void main() => runApp(MyApp(
  items: List<String>.generate(length, generator)
));

items是傳入的參數(shù),聲明一個List,要求是String類型的.調(diào)用generate方法來生成這個List.需要傳入2個參數(shù),1個是List的長度,第二個需要的是內(nèi)容
generator內(nèi)容可以通過一個匿名函數(shù)返回,傳入的i表示下標

void main() => runApp(MyApp(
  items: List<String>.generate(1000, (i)=>"item $i")
));

接收外部傳遞的參數(shù)

參數(shù)傳入已經(jīng)完成了,這個時候就需要MyApp來接收參數(shù)了,傳遞參數(shù)具體內(nèi)容已在demo中進行注釋

class MyApp extends StatelessWidget{
  //- 定義一個變量
  final List<String> items; 
  /*
   * 構(gòu)造函數(shù),用于接收外部傳入的參數(shù) 
   * Key key 固定寫法,需要傳入key值
   * @required 表示這個參數(shù)為必須傳入
   * this.items 調(diào)用當(dāng)前類聲明的items
   * :super(key: key) 由于當(dāng)前繼承的是StatelessWidget,需要調(diào)用super重新構(gòu)造
   */
  MyApp({Key key, @required this.items}):super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'beline App',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: Center()
      ),
    );
  }
}

這樣我們的MyApp就已經(jīng)能夠接收到傳遞進來的items了.

ListView.builder() 動態(tài)構(gòu)建

要怎么才能使用這個傳遞進來的items呢,我們知道在Vue中可以通過for循環(huán)來遍歷數(shù)組,實現(xiàn)反復(fù)渲染頁面結(jié)構(gòu)的目的.這里Flutter為我們提供了ListView.builder()動態(tài)構(gòu)建List的組件來實現(xiàn)數(shù)組的遍歷

import 'package:flutter/material.dart';
void main() => runApp(MyApp(
  items:List<String>.generate(1000, (i)=>"item $i")
));
class MyApp extends StatelessWidget{
  //- 定義一個變量
  final List<String> items; 
  /*
   * 構(gòu)造函數(shù),用于接收外部傳入的參數(shù) 
   * Key key 固定寫法,需要傳入key值
   * @required 表示這個參數(shù)為必須傳入
   * this.items 調(diào)用當(dāng)前類聲明的items
   * :super(key: key) 由于當(dāng)前繼承的是StatelessWidget,需要調(diào)用super重新構(gòu)造
   */
  MyApp({Key key, @required this.items}):super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'beline App',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: ListView.builder(
          itemCount: items.length,  //- 要生成的條數(shù)
          itemBuilder: (context, index){
            return ListTile(
              title: Text('${items[index]}')
            );
          }
        ),
      ),
    );
  }
}

這里需要注意ListView.builder()有兩個參數(shù),一個是需要生成的條數(shù)itemCount,另一個是生成的內(nèi)容itemBuilder,其中itemBuilder也需要2個參數(shù),第一個是上下文,另一個是下標.然后返回需要輸出的內(nèi)容即可.

image.png