Flutter | 给 ListView 添加表头表尾最简单的方式

看到有不少人在用 CustomScrollView，我实在心痛，杀鸡焉用牛刀？

好好看代码，一个小小的 Column 就能解决问题：

class _AddHeaderFooterListPageState extends State<AddHeaderFooterListPage> {
    
  final _dataArray = [1, 2, 3];

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: BaseAppBar(titleText: '添加表头表尾'),
      body: ListView.builder(
        itemCount: _dataArray.length,
        itemBuilder: (context, index) {
    
          if (index == 0) {
    
            // 开头
            return Column(
              children: [
                _buildHeader(),
                _buildCell(index),
              ],
            );
          } else if (index == _dataArray.length - 1) {
    
            // 结尾
            return Column(
              children: [
                _buildCell(index),
                _buildFooter(),
              ],
            );
          } else {
    
            return _buildCell(index);
          }
        },
      ),
    );
  }

  Widget _buildCell(int index) {
    
    return Container(
      alignment: Alignment.centerLeft,
      height: 30,
      color: Colors.orange,
      child: Text('这是cell-$index'),
    );
  }

  Widget _buildHeader() {
    
    return Container(
      alignment: Alignment.center,
      height: 100,
      color: Colors.red,
      child: const Text('这是表头'),
    );
  }

  Widget _buildFooter() {
    
    return Container(
      alignment: Alignment.center,
      height: 100,
      color: Colors.green,
      child: const Text('这是表尾'),
    );
  }
}