Flutter FlexibleSpaceBar

简介

FlexibleSpaceBar 是一个可以在 SliverAppBar 中使用的控件。它可以让用户自定义当 SliverAppBar 折叠时，可滚动视图顶部留出的空白区域。这是在实现折叠视图时非常有用的功能。

使用方法

首先需要在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_material:
    ^2.0.0

接下来就可以在代码中导入模块并使用 FlexibleSpaceBar 控件了：

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      expandedHeight: 200.0,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        centerTitle: true,
        title: Text("Collapsible Toolbar"),
        background: Image.network(
          "https://images.unsplash.com/photo-1579546929511-da31e9e9929a"
        ),
      ),
    );
  }
}

上面的代码定义了一个有可折叠视图的 SliverAppBar。其中，expandedHeight 表示在完全展开时的高度，floating 表示是否在滚动时浮动，pinned 表示是否固定在顶部。

在 SliverAppBar 中使用的 FlexibleSpaceBar 控件含有三个可定义的属性：

• centerTitle：是否标题居中显示；
• title：滚动折叠后的标题；
• background：可滚动视图顶部的背景图。

示例

这里提供一个完整的示例代码，其中通过多次点击按钮，来控制 SliverAppBar 的折叠和展开：

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

void main() {
  runApp(MaterialApp(home: Example(),));
}

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final double _appBarHeight = 200.0;
  bool _isCollapsed = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: _appBarHeight,
            floating: false,
            pinned: true,
            snap: false,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text("Collapsible Toolbar"),
              background: Image.network(
                "https://images.unsplash.com/photo-1579546929511-da31e9e9929a",
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(
                  height: 1000,
                  child: Center(
                    child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          _isCollapsed = !_isCollapsed;
                        });
                      },
                      child: Text(_isCollapsed ? "Expand" : "Collapse"),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

总结

FlexibleSpaceBar 是一个很有用的控件，可以通过它来自定义 SliverAppBar 的可折叠区域。使用非常简单，有兴趣的同学可以尝试在自己的项目中使用。