Flutter列表组件的使用和技巧

• 基于ListView实现水平方向和垂直方向滚动的列表；
• 基于ExpansionTile实现可展开的列表，ExpansionTile(title, children)；
• 基于GridView实现网格列表；
• 高级功能：下拉刷新和上拉加载更多功能实现。

// 水平方向的列表
body: ListView(scrollDirection: Axis.horizontal, children: _buildList()),
  List<Widget> _buildList() {
    return CITY_NAMES.map((e) => _item(e)).toList();
  }
  Widget _item(city) {
    return Container(
      height: 80,
      margin: EdgeInsets.only(bottom: 6),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.teal),
      child: Text(city, style: TextStyle(color: Colors.white, fontSize: 20)),
    );
  }

网格布局效果GridView

GridView.count(
    crossAxisCount: 2,
    children: _buildList(),
)

下拉刷新，上拉加载更多功能

• RefreshIndicator: 一个下拉刷新的Widget，通过它实现列表的下拉刷新。
• ScrollContoller: 列表支持设置controller参数，通过ScrollContoller监听列表滚动的位置，来实现加载更多的功能。

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _scrollController = ScrollController();
  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        // 列表滚动到底部了，触发加载更多, listView要设置controller。
        _loadMore();
      }
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('列表下拉刷新，上拉加载更多')),
      body: RefreshIndicator(
        onRefresh: _handleRefresh,
        child: ListView(controller: _scrollController, children: _buildList()),
      ),
    );
  }
  _loadMore() async {
    await Future.delayed(Duration(milliseconds: 100));
    setState(() {
      List<String> list = List<String>.from(cityNames); // 复制数组
      list.addAll(cityNames);
      cityNames = list;
      print('object length : ${cityNames.length}');
    });
  }

  // Future不想返回任何类型，可设置泛型为Null
  Future<Null> _handleRefresh() async {
    await Future.delayed(Duration(seconds: 2)); // 模拟网络请求
    setState(() {
      cityNames = cityNames.reversed.toList();
    });
    return null;
  }

  List<Widget> _buildList() {
    return cityNames.map((e) => _item(e)).toList();
  }
  Widget _item(city) {
    return Container(
      height: 80,
      margin: EdgeInsets.only(bottom: 6, right: 6),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.teal),
      child: Text(city, style: TextStyle(color: Colors.white, fontSize: 20)),
    );
  }
}