Flutter列表控件ListView與GridView

代碼如下：

import 'package:flutter/material.dart';
import 'ListViewTest.dart';
void main(){

  runApp(
    MaterialApp(
      title: "title",
      home: new Scaffold(
        appBar: new AppBar(title: Text("appBar")),
        body:Container(
          child: new ListViewTest(),
        )
      )
    ),
  );

}

import 'package:flutter/material.dart';

class ListViewTest extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new _ListViewTest();
  }

}

class _ListViewTest extends State<ListViewTest>{

  List<String> _list = new List();

  @override
  void initState() {
    super.initState();
    for(int i = 0; i < 30; i++){
      _list.add("第$i條數據");
    }
  }

  @override
  Widget build(BuildContext context) {
    return getListView();//效果如下
  }

}

SingleChildScrollView的使用：

Widget getListView(){
    List<Widget> widget = new List();
    for (var value in _list) {
      widget.add(
          Text(
            value,
            style: TextStyle(
                fontSize: 20.0,
                color: Colors.red
            ),
          )
      );
    }

    //類似android中的ScrollView   這里SingleChildScrollView的寬度是包裹內容的寬度
    return SingleChildScrollView(
      child: Column(
        children: widget,
      ),
    );

}

效果圖：

ListView的使用：

Widget getListView2(){
    List<Widget> widget = new List();
    for (var value in _list) {
      widget.add(
          Text(
            value,
            style: TextStyle(
                fontSize: 20.0,
                color: Colors.red
            ),
          )
      );
    }

    //與android不同的是，可以把ListView當做ScrollView來使用
    return ListView(
      children: widget,
    );

  }

效果圖同上，但ListView的寬度是整個屏幕寬度

另一種用法：

ListView getListView(){
    return ListView.builder(
      scrollDirection: Axis.vertical,//設置列表的 滑動方向
      
      //設置item
      itemBuilder: (BuildContext context, int index){
        return InkWell(//InkWell是有水波紋效果的Widget,  需要有個父布局為Material
          onTap: (){
            //寫了點擊事件  才會有水波紋效果
            print("點擊事件");
          },
          onLongPress: (){
            print("長按事件");
          },
          splashColor: Colors.blue,
          child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(15.0),
              decoration: BoxDecoration(
                //設置背景色 與 分割線
                border: Border(
                    bottom: BorderSide(
                        color: Colors.red,
                        width: 5.0
                    )
                ),
                //color: index % 2 == 0 ? Colors.grey : Colors.yellow,//背景顏色
              ),
              child: Text(
                _list[index],
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.red
                ),
              )
          ),
        );
      },
      
      //確定個數
      itemCount: _list.length,
    );
  }

效果圖：

GridView的使用：

第一種使用方法：

GridView getGridView(){
    return GridView.count(
      crossAxisCount: 3,//每行的個數
      //padding: EdgeInsets.all(20.0),
      crossAxisSpacing: 10.0,//交叉軸間距
      mainAxisSpacing: 10.0,//主軸間距
      childAspectRatio: 1.0,//縱橫軸的比例（寬：高 = childAspectRatio）
      children: <Widget>[
        new Container(
          color: Colors.red,
          alignment: Alignment.center,
          child: Text("第1個"),
        ),
        new Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text("第2個"),
        ),
        new Container(
          color: Colors.red,
          alignment: Alignment.center,
          child: Text("第3個"),
        ),
        new Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text("第4個"),
        ),
        new Container(
          color: Colors.red,
          alignment: Alignment.center,
          child: Text("第5個"),
        ),
        new Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text("第6個"),
        ),
        new Container(
          color: Colors.red,
          alignment: Alignment.center,
          child: Text("第7個"),
        ),
        new Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text("第8個"),
        ),
      ],
    );
  }

效果圖：

第二種使用方法，根據index創建item：

GridView getGridView(){
    return GridView.builder(
      //設置滑動方向
      scrollDirection:Axis.horizontal,

      //設置屬性
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,//每行的個數
        crossAxisSpacing: 10.0,//交叉軸間距
        mainAxisSpacing: 10.0,//主軸間距
        childAspectRatio: 1.0,//縱橫軸的比例（寬：高 = childAspectRatio）
      ),

      //創建item
      itemBuilder:(BuildContext context, int index){
        return new FlatButton(
          onPressed: (){
            Scaffold.of(context).showSnackBar(
                new SnackBar(content: Text("點擊了$index"))
            );
          },
          color: Colors.red,
          child: Text("${_list[index]}"),
        );
      },

      //確定個數
      itemCount: _list.length,
    );
  }

效果圖：