翩翩飞舞的SliverAppBar，折叠背景填充前导空间。

Question

我想使用以下功能创建一个具有 SliverAppBar 以至于当我向上滚动列表时，主体内的图标会缩小到在 leading 空间的appBar。

这里的图片显示了我想要实现的东西。当我向上滚动时，图表应该向上移动并在标题旁边滑动。(类似于Hero widget)

直到现在，我还在尝试 SliverAppBar但未能成功。我很乐意使用其他小工具来实现这个目标。谢谢你。

Answer 1

你有试过这个吗？

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

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

class _MyHomePageState extends State<MyHomePage> {
  //Variables needed to adapt FlexibleSpaceBar text color (title)
  ScrollController _scrollController;
  bool lastStatus = true;
  double height = 200;

  void _scrollListener() {
    if (_isShrink != lastStatus) {
      setState(() {
        lastStatus = _isShrink;
      });
    }
  }

  bool get _isShrink {
    return _scrollController.hasClients &&
        _scrollController.offset > (height - kToolbarHeight);
  }

  @override
  void initState() {
    super.initState();

    _scrollController = ScrollController()..addListener(_scrollListener);
  }

  @override
  void dispose() {
    _scrollController.removeListener(_scrollListener);
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: height,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: _isShrink
                    ? Row(
                        children: [
                          //Replace container with your chart
                          // Here you can also use SizedBox in order to define a chart size
                          Container(
                              margin: EdgeInsets.all(10.0),
                              width: 30,
                              height: 30,
                              color: Colors.yellow),
                          Text('A little long title'),
                        ],
                      )
                    : SingleChildScrollView(
                        child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: <Widget>[
                              Text(
                                'A little long title',
                                textAlign: TextAlign.center,
                              ),
                              //Replace container with your chart
                              Container(
                                height: 80,
                                color: Colors.yellow,
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Text('Your chart here'),
                                  ],
                                ),
                              ),
                            ]),
                      ),
              ),
            ),
          ];
        },
        body: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return Container(
              height: 40,
              child: Text(index.toString()),
            );
          },
        ),
      ),
    );
  }
}