如何自定义SliverAppBar应用栏？

Question

我想在绿色区域添加更多信息，但是当用户向上滚动时，我会将_ SliverAppBar保留在顶部...，如下所示：

这是我目前的源代码：

body: new CustomScrollView(slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 300.0, // TODO: check out later
            flexibleSpace: const FlexibleSpaceBar(
              title: const Text('_SliverAppBar')
            ),
          ),
          new SliverList(delegate: new SliverChildListDelegate(_galleryListItems()))
        ]),

Answer 1

FlexibleSpaceBar有一个后台属性，可以接受任何Widget

用于构建您需要的信息：

FlexibleSpaceBar(
  title: Text('_SliverAppBar'),
  background: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Info'),
    ],
  ),
),

Here是一个更完整的示例，可以添加字幕并在用户滚动时隐藏它。

Answer 2

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'My Flutter Pad'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

const kExpandedHeight = 300.0;

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              leading: Icon(Icons.menu),
              actions: <Widget>[
                new IconButton(
                  icon: new Icon(Icons.search),
                  highlightColor: Colors.white,
                  onPressed: () {},
                ),
              ],
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  background: Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage("assets/images/bar.jpg"),
                            fit: BoxFit.cover)),
                    child: Column(
                      children: [
                        Expanded(
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text('NEW GAME'),
                                Text('Sekiro: Shadows Dies Twice'),
                                RaisedButton(
                                  onPressed: () {},
                                  child: Text('Play'),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  )),
            ),
          ];
        },
        body: Center(
          child: Text("Sample Text"),
        ),
      ),
    );
  }
}