flutter學習--列表組件

基本使用

使用ListView，然後在他的內部children中，使用了widget數組，因爲是一個列表，所以它接受一個數組，然後有使用了listTite組件（列表瓦片），在組件中放置了圖標和文字。

body: new ListView(
  children:<Widget>[
    new ListTile(
      leading:new Icon(Icons.access_time),
      title:new Text('access_time')
    )
  ]
),

多加入幾行列表

body: new ListView(
  children:<Widget>[
    new ListTile(
      leading:new Icon(Icons.access_time),
      title:new Text('access_time')
    ),
    new ListTile(
      leading:new Icon(Icons.account_balance),
      title:new Text('account_balance')
    ),
  ]
),

橫向列表的使用

scrollDirection: Axis.horizontal,

ListView組件的scrollDirection屬性只有兩個值，一個是橫向滾動，一個是縱向滾動。默認的就是垂直滾動，所以如果是垂直滾動，我們一般都不進行設置。

• Axis.horizontal:橫向滾動或者叫水平方向滾動。
• Axis.vertical:縱向滾動或者叫垂直方向滾動。

動態列表

List類型的使用

• var myList = List(): 非固定長度的聲明。
• var myList = List(2): 固定長度的聲明。
• var myList= List():固定類型的聲明方式。
• var myList = [1,2,3]: 對List直接賦值。

使用一個List傳遞，然後直接用List中的generate方法進行生產List裏的元素。最後的結果是生產了一個帶值的List變量。代碼如下：

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

說明:在main函數的runApp中調用了MyApp類，再使用類的使用傳遞了一個items參數,並使用generate生成器對items進行賦值。

generate方法傳遞兩個參數，第一個參數是生成的個數，第二個是方法。

接受參數

final List<String> items;
 MyApp({Key key, @required this.items}):super(key:key);

這是一個構造函數，除了Key，我們增加了一個必傳參數，這裏的@required意思就必傳。:super如果父類沒有無名無參數的默認構造函數，則子類必須手動調用一個父類構造函數。

動態列表 ListView.builder()

接受了值之後，就可以直接調用動態列表進行生成了。具體代碼如下：

class MyApp extends StatelessWidget{

  final List<String> items;
  MyApp({Key key, @required this.items}):super(key:key);
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:new ListView.builder(
            itemCount:items.length,
            itemBuilder:(context,index){
              return new ListTile(
                title:new Text('${items[index]}'),
              );
            }
          )
        ),
      );
  }
}

GridView網格列表組件

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:GridView.count(
            padding:const EdgeInsets.all(20.0),
            crossAxisSpacing: 10.0,
            crossAxisCount: 3,
            children: <Widget>[
              const Text('I am Jspang'),
              const Text('I love Web'),
              const Text('jspang.com'),
              const Text('我喜歡玩遊戲'),
              const Text('我喜歡看書'),
              const Text('我喜歡吃火鍋')
            ],
          )
        ),
      );
  }
}

在body屬性中加入了網格組件，然後給了一些常用屬性:

• padding:表示內邊距，這個小夥伴們應該很熟悉。
• crossAxisSpacing:網格間的空當，相當於每個網格之間的間距。
• crossAxisCount:網格的列數，相當於一行放置的網格數量。

圖片網格列表

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
              mainAxisSpacing: 2.0,
              crossAxisSpacing: 2.0,
              childAspectRatio: 0.7
            ),
            children: <Widget>[
             new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
           
            ],
          )
        ),
      );
  }
}

childAspectRatio:寬高比，這個值的意思是寬是高的多少倍，如果寬是高的2倍，那麼就是2.0，如果高是寬的2倍，那麼就是0.5。