如何在Flutter中自定义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()))
        ]),

- DNB5brims

Answer 1

FlexibleSpaceBar具有背景属性，可接受任何小部件。

用于构建所需的信息：

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

这里有一个更完整的示例，它添加了副标题并在用户滚动时隐藏它。

- Ian

---

该列出现了一个错误：[dart] 此处调用的构造函数不是常量构造函数。 请问能否提供建议？谢谢。 - DNB5brims

我注意到你的代码中使用了 const 实例化小部件，在这种情况下，所有属性都必须接收 const 实例。Dart 2 带有一个功能，您不需要指定如何实例化类，因此可以省略 new 关键字和 const 关键字，并让语言推断将使用哪个关键字。建议使用 Dart 的这个功能 :) - Ian

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"),
        ),
      ),
    );
  }
}

- Milan Sobhashna