Flutter 列表学习（listview，gridview，ExpansionTile，ScrollController，RefreshIndicator）

任何页面可以分为3类，第一类 全列表，第二类非列表，第三类非列表和列表，所以列表玩溜了，就成功了一大步。下面我们就开始搞列表

列表分类

1. 纵向列表

2. 横向列表

3. 网格列表

4. 可点击展开列表

5. 下拉刷新

6. 加载更多

listview(纵向横向列表)

import 'package:flutter/material.dart';

class ListViewPage extends StatefulWidget {
  @override
  _ListViewPageState createState() => _ListViewPageState();
}

class _ListViewPageState extends State<ListViewPage> {
  var _scrollcontroller = ScrollController();
  List<String> _datas = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "A",
    "B",
    "C",
    "D",
    "E",
    "A",
    "B",
    "C",
    "D",
    "E"
  ];

  @override
  void dispose() {
    // TODO: implement dispose
    _scrollcontroller.dispose();
    super.dispose();
  }

  @override
  void initState() {
    // TODO: implement initState
    _scrollcontroller.addListener(() {
      if (_scrollcontroller.position.pixels ==
          _scrollcontroller.position.maxScrollExtent) {
        _loadData();
      }
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RefreshIndicator(
          child: ListView.builder(
            //scrollDirection: Axis.horizontal,
            controller: _scrollcontroller,
            itemBuilder: (context, index) {
              return _item(index);
            },
            itemCount: _datas.length,
          ),
          onRefresh: _handerRefres),
    );
  }

  Future<Null> _handerRefres() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _datas = _datas.reversed.toList();
    });
  }

  Future<Null> _loadData() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      var list = List<String>.from(_datas);
      list.addAll(_datas);
      _datas = list;
    });
  }

  Widget _item(index) {
    return Container(
      height: 80,
//      width: 160,
//      margin: const EdgeInsets.only(right: 5),
      margin: const EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.teal),
      child: Text(
        _datas[index],
        style: TextStyle(
            color: Colors.white, fontSize: 20, decoration: TextDecoration.none),
      ),
    );
  }
}

gridview (网格列表)

import 'package:flutter/material.dart';

class GridViewPage extends StatefulWidget {
  @override
  _GridViewPageState createState() => _GridViewPageState();
}

class _GridViewPageState extends State<GridViewPage> {
  List<String> _datas = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "A",
    "B",
    "C",
    "D",
    "E",
    "A",
    "B",
    "C",
    "D",
    "E"
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GridView.count(
        crossAxisCount: 2,
        children: getws(),
        //scrollDirection: Axis.horizontal,
      ),
    );
  }


  List<Widget> getws(){
    return _datas.map((f)=>_item(f)).toList();
  }

  Widget _item(index) {
    return Container(
      height: 80,
//      width: 160,
//      margin: const EdgeInsets.only(right: 5),
       margin: const EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.teal),
      child: Text(
        index,
        style: TextStyle(
            color: Colors.white, fontSize: 20, decoration: TextDecoration.none),
      ),
    );
  }
}

ExpansionTile （可以点击展开列表）

import 'package:flutter/material.dart';

const DATA = {
  "A": ["AB", "AC", "AD"],
  "B": ["BB", "BC", "BD"],
  "C": ["CB", "CC", "CD"],
  "D": ["DB", "DC", "DD"],
};

class ExpansionTitlePage extends StatefulWidget {
  @override
  _ExpansionTitlePageState createState() => _ExpansionTitlePageState();
}

class _ExpansionTitlePageState extends State<ExpansionTitlePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView(
        children: _getWs(),
      ),
    );
  }

  Widget _item(String title, List<String> datas) {
    return ExpansionTile(
      title: Text(title,
      style: TextStyle(color: Colors.black54,fontSize: 20),
      ),
      children: datas.map((data) => _item2(data)).toList(),
    );
  }

  List<Widget> _getWs() {
    List<Widget> ws = [];
    DATA.keys.forEach((key) {
      ws.add(_item(key, DATA[key]));
    });
    return ws;
  }

  Widget _item2(title) {
    //可伸缩
    return FractionallySizedBox(
      widthFactor: 1,
      child: Container(
        alignment: Alignment.center,
        height: 50,
        margin: const EdgeInsets.only(bottom: 5),
        decoration: BoxDecoration(color: Colors.lightBlueAccent),
        child: Text(title),
      ),
    );
  }
}

RefreshIndicator 下拉刷新控件

代码实例和listview一样

ScrollController 加载更多控件

代码实例和listview一样