CustomScrollView

Posted 2021-02-17 braveheart007

import ‘package:flutter/material.dart‘;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollViewTestRoute(),
      ),
    );
  }
}

class CustomScrollViewTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: true,
          expandedHeight: 250.0,
          flexibleSpace: FlexibleSpaceBar(
            title: const Text(‘Demo‘),
            background: Image.network(‘http://www.ecobentech.com/img/a.jpg‘,fit: BoxFit.cover,),
          ),
        ),

        SliverPadding(
          padding: const EdgeInsets.all(8.0),
          sliver: SliverGrid( //Grid
            gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, //Grid按两列显示
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: new SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                //创建子widget
                return new Container(
                  alignment: Alignment.center,
                  color: Colors.cyan[100 * (index % 9)],
                  child: new Text(‘grid item $index‘),
                );
              },
              childCount: 20,
            ),
          ),
        ),
        //List
        SliverFixedExtentList(
          itemExtent: 50.0,
          delegate: new SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                //创建列表项
                return new Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: new Text(‘list item $index‘),
                );
              },
              childCount: 50 //50个列表项
          ),
        ),
      ],
    );
  }
}