android - Flutter SliverAppBar 和 FlexibleSpaceBar 在向上滚动时呈现与 FlexibleSpaceBar 的标题参数不同的小部件

Question

我想渲染一些很酷的小部件作为 FlexibleSpaceBar 的标题，但是当我向上滚动这个标题(FlexibleSpaceBar 的命名参数)变成应用栏的标题而不是这个标题我想使用其他一些小部件来显示在应用栏中(只是一个文本小部件或其他东西)。这是 UI 的 GIF。在下面的 GIF 中，FlexibleSpaceBar 的标题是一个容器，可以是我想要的任何花哨的小部件但是我想要做的是，当它向上滚动时，整个小部件成为标题appbar 我想用不同的文本呈现一个简单的文本小部件。

Widget build(BuildContext context) {

return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: MediaQuery.of(context).size.height * .3,
        floating: false,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Container(
            color: Colors.black,
            child: Text("Some Widget Here",
                style: TextStyle(

                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                  fontSize: 19.0,
                )),
          ),
          background: CachedNetworkImage(
            imageUrl: store.coverUrl,
            fit: BoxFit.cover,
          ),
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          height: 800,
          child: Center(
            child: Text("Blah Blah Blah"),
          ),
        ),
      )
    ],
  ),
);

Answer 1

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {

var top;
return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 150,
          flexibleSpace: LayoutBuilder(builder: (context, constraints) {
            top = constraints.biggest.height;
            print(top);
            return FlexibleSpaceBar(
              title: top < 110.14 ? Text("data") : Text("app"),
            );
          }),
          floating: true,
          pinned: true,
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
                return listItem("Sliver List item: $index");
            },
          ),
        )
      ],
    );
  }
}