Flutter 中如何自定义 SliverAppBar 小部件？答案

【问题标题】：How to customize the SliverAppBar widget in flutter?Flutter 中如何自定义 SliverAppBar 小部件？
【发布时间】：2018-10-01 05:44:02
【问题描述】：

我想在绿色区域添加更多信息，但是当用户向上滚动时，我将_ 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()))
        ]),

【问题讨论】：

标签： dart flutter

【解决方案1】：

FlexibleSpaceBar 有一个接受任何小部件的背景属性

用于构建您需要的信息：

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

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

【讨论】：

列出现错误：[dart] The constructor being called isn't a const constructor.。你会建议吗？谢谢。
好吧，我注意到在您的代码中，您使用const 实例化小部件，当您这样做时，所有属性都必须接收带有const 的实例。 Dart 2 有一个特性，你不需要指定如何实例化类，所以你可以省略 new 关键字和 cost 关键字，让语言推断它会使用哪一个。我建议使用 dart 的功能 :)

【解决方案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"),
        ),
      ),
    );
  }
}

【讨论】：