flutter Sliver

Sliver

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
//        appBar: AppBar(
//          title: Text("九宫格"),
//        ),
        body: HoneContent(),
      ),
    );
  }
}

class HoneContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SliversWidget();
  }
}

class SliversWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CustomScrollView(
      slivers: [
        SliverSafeArea(
          sliver: SliverPadding(
            padding: EdgeInsets.all(10),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
              ),
              delegate: SliverChildBuilderDelegate(
                      (BuildContext content, int index) {
                        return Container(
                          alignment: Alignment(0, 0),
                          color: Colors.orange,
                          child: Text("Item$index"),
                        );
                      },
                childCount: 20
              ),
            ),
          ),
        ),
      ],
    );
  }
}

组合

class CustomScrollViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CustomScrollView(
      slivers: [
        const SliverAppBar(
          expandedHeight: 250.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text("组合视图"),
            background: Image(
              image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverGrid(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 200.0,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 4.0
          ),
          delegate: SliverChildBuilderDelegate(
                  (BuildContext context,int index) {
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.teal[100 * (index % 9)],
                      child: Text("GridItem$index"),
                    );
                  },
            childCount: 10,
          ),
        ),
        SliverFixedExtentList(
          itemExtent: 50,
          delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: Text("ListItem$index"),
                    );
                  },
            childCount: 20,
          ),
        ),
      ],
    );
  }
}