Flutter基础组件(3-4)-ListView的headView和footView

flutter的ListView添加HeaderView和FooterView使用CustomScrollView + SliverToBoxAdapter + SliverList来实现.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter App'),),
         body: ListViewAddHeaderView(),
      ),
    );
  }
}

class ListViewAddHeaderView extends StatelessWidget {
  // 列表项
  Widget _buildListItem(BuildContext context, int index) {
    return ListTile(
        title: Text('list tile index $index')
    );
  }

  @override
  Widget build(BuildContext context) {
    return  CustomScrollView(
      slivers: <Widget>[
        // 如果不是Sliver家族的Widget，需要使用SliverToBoxAdapter做层包裹
        SliverToBoxAdapter(
          child: Container(
            height: 120,
            color: Colors.green,
            child: Text('HeaderView',
              style: TextStyle(color: Colors.red, fontSize: 20),),
          ),
        ),
        // 当列表项高度固定时，使用 SliverFixedExtendList 比 SliverList 具有更高的性能
        SliverFixedExtentList(
            delegate: SliverChildBuilderDelegate(
                _buildListItem, childCount: 18),
            itemExtent: 48.0
        ),

        SliverToBoxAdapter(
          child: Container(
            height: 120,
            color: Colors.green,
            child: Text('FotterView',
              style: TextStyle(color: Colors.red, fontSize: 20),),
          ),
        ),

      ],
    );
  }
}

                            想了解更多Flutter学习知识请联系:QQ(814299221)