Flutter SliverAppBar，折叠背景填充前导空间答案

【问题标题】：Flutter SliverAppBar, Collapse background to fill the leading spaceFlutter SliverAppBar，折叠背景填充前导空间
【发布时间】：2020-07-03 22:18:11
【问题描述】：

我想使用SliverAppBar 创建一个长条列表视图，这样当我向上滚动列表时，主体内的图标会缩小到appBar 的leading 空间中。

这里的图片展示了我想要实现的目标。当我向上滚动时，图表应该向上移动并在标题旁边滑动。（类似于英雄小部件）

到目前为止，我尝试了SliverAppBar，但未能成功。我很高兴使用其他一些小部件来实现这一点。谢谢。

【问题讨论】：

标签： flutter charts flutter-layout flutter-sliver sliverappbar

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

【讨论】：

【解决方案2】：

我认为 SliverAppBar 无法做到这一点。您应该在 Pub.dev 中搜索软件包可能会对您有所帮助fluent_appbar

【讨论】：