CustomScrollView And SliverAppBar

165 阅读1分钟

class Mine extends StatefulWidget {
  Mine({Key? key}) : super(key: key);

  @override
  _MineState createState() => _MineState();
}

class _MineState extends State<Mine> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          backgroundColor: Colors.white,
          flexibleSpace: FlexibleSpaceBar(
            title: Text(
              '网易云音乐',
              style: TextStyle(color: Colors.amber[700]),
            ),
            centerTitle: false,
            collapseMode: CollapseMode.pin,
            background: Image.network(
              'https://img1.baidu.com/it/u=987569719,2588090655&fm=26&fmt=auto&gp=0.jpg',
              fit: BoxFit.fill,
            ),
          ),
          floating: true,
          snap: true,
          pinned: true,
          expandedHeight: 200,
        ),
        SliverFixedExtentList(
          itemExtent: 100.0,
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Card(
                child: Container(
                  alignment: Alignment.center,
                  // color: Colors.primaries[(index % 3)],
                  child: Text('1111-$index'),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}