Flutter中CustomScrollView_SliverGrid和SliverList

例子效果图：

代码：

import 'dart:math';
import 'package:flutter/material.dart';

main(){
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        // appBar: AppBar(
        //   title: const Text("SliverGrid"),
        //   centerTitle: true,
        // ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
        slivers: [
           SliverAppBar(
            expandedHeight: 300,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text("CustomScrollView 例子"),
              background: Image.asset("assets/images/lizi.jpeg",fit: BoxFit.cover,),
            ),
            pinned: true,//当往上拉的时候，true表示标题栏固定在头部，否则会随着内容一起消失
          ),
           SliverGrid(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: 8,
                    crossAxisSpacing: 8,
                    childAspectRatio: 1.5
                ),
                delegate: SliverChildBuilderDelegate(
                        (BuildContext context,int index){
                      return Container(
                        color: Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255)),
                      );
                    },
                    childCount: 12
                )
            ),
            SliverList(
                   delegate: SliverChildBuilderDelegate(
                           (BuildContext context, int index) {
                         return Text("这是标题${index+1}");
                       },
                       childCount: 30
                   )
               ),

        ],
      );
  }
}