【自学Flutter】22 CustomScrollView的使用

最新推荐文章于 2024-12-17 17:49:25 发布

技术宅-Nopi

最新推荐文章于 2024-12-17 17:49:25 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：自学Flutter 文章标签： Flutter Android

本文链接：https://blog.youkuaiyun.com/weixin_43266090/article/details/94217917

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文介绍如何在Flutter中使用CustomScrollView实现复杂滚动效果，包括固定头部的AppBar、网格视图GridView和列表视图ListView的结合展示。

22 CustomScrollView的使用

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                leading: Icon(Icons.apps,color: Colors.deepOrange,),
                pinned: true,
                expandedHeight: 200,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text("SliverAppBar",style: TextStyle(color: Colors.red),),
                  background: Image.network(
                    "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              SliverPadding(
                padding: EdgeInsets.all(10.0),
                sliver: SliverGrid(
                    delegate: SliverChildBuilderDelegate((BuildContext context,int index){
                      return Container(
                        alignment: Alignment.center,
                        color: Colors.lightBlue[100 * (index % 9)],
                        child: new Text("Grid版块：$index",style: TextStyle(color: Colors.orange),),
                      );
                    },
                      childCount: 10,
                    ),

                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: 1,
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10
                    ),
                ),
              ),
              SliverFixedExtentList(
                  delegate: SliverChildBuilderDelegate((BuildContext context,int index){
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: new Text("Grid版块：$index",style: TextStyle(color: Colors.orange),),
                    );
                  },
                    childCount: 10,
                  ),
                  itemExtent: 50
              )
            ],
          ),
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              //包含了一个AppBar
              SliverAppBar(
                leading: Icon(Icons.apps,color: Colors.deepOrange,),
                pinned: true,
                expandedHeight: 200,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text("SliverAppBar",style: TextStyle(color: Colors.red),),
                  background: Image.network(
                    "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1333189478,4259049031&fm=173&app=25&f=JPEG?w=640&h=640&s=6BA43A6238B07BA77D3C7CC60000E0E1",
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              SliverPadding(
                padding: EdgeInsets.all(10.0),
                //相当于GridView
                sliver: SliverGrid(
                    delegate: SliverChildBuilderDelegate((BuildContext context,int index){
                      return Container(
                        alignment: Alignment.center,
                        color: Colors.lightBlue[100 * (index % 9)],
                        child: new Text("Grid版块：$index",style: TextStyle(color: Colors.orange),),
                      );
                    },
                      childCount: 10,
                    ),

                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: 1,
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10
                    ),
                ),
              ),
              //相当于ListView
              SliverFixedExtentList(
                  delegate: SliverChildBuilderDelegate((BuildContext context,int index){
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: new Text("Grid版块：$index",style: TextStyle(color: Colors.orange),),
                    );
                  },
                    childCount: 10,
                  ),
                  itemExtent: 50
              )
            ],
          ),
        )
    );
  }
}

3.效果图

效果图