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,
    );
  }

效果图：

 实现瀑布流效果的一个库：

https://pub.dev/packages/flutter_staggered_grid_view

使用CustomScrollView实现复杂布局的嵌套： 

CustomScrollView