简介

FlexibleSpaceBar “扩展和折叠的应用栏”

AppBar 的一部分，可以扩展和折叠;

基本用法

最常用于 SliverAppBar.flexibleSpace 字段

灵活的空格键随着应用滚动而扩展和收缩，以便 AppBar 从应用程序的顶部到达应用程序滚动内容的顶部;
要调整 AppBar 大小,必须将其包装在 FlexibleSpaceBar.createSettings 返回的 widget 中，以将大小调整信息传递给 FlexibleSpaceBar;

实例演示

import 'package:flutter/material.dart';

/*
* Checkbox 默认FlexibleSpaceBar的实例
* */
class FlexibleSpaceBarFullDefault extends StatefulWidget {
  const FlexibleSpaceBarFullDefault() : super();

  @override
  State<StatefulWidget> createState() => _FlexibleSpaceBarFullDefault();
}

/*
* FlexibleSpaceBar 默认的实例,有状态
* */
class _FlexibleSpaceBarFullDefault extends State {
  @override
  Widget build(BuildContext context) {
    return FlexibleSpaceBar(
      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
    );
  }
}

/*
* FlexibleSpaceBar 默认的实例,无状态
* */
class FlexibleSpaceBarLessDefault extends StatelessWidget {
  final widget;
  final parent;

  const FlexibleSpaceBarLessDefault([this.widget, this.parent])
      : super();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: 300.0,
        child: Scaffold(
          body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: 150.0,
                  floating: false,
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                      title: Text("Collapsing Toolbar",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          )),
                      background: Image.network(
                        "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                        fit: BoxFit.cover,
                      )),
                ),
              ];
            },
            body: Center(
              child: Text("向上提拉 ⬆ 查看效果..."),
            ),
          ),
        )
    );
}}