Flutter：如何设置 SliverAppBar 默认折叠答案

【问题标题】：Flutter:How do I set the SliverAppBar collapsed by defaultFlutter：如何设置 SliverAppBar 默认折叠
【发布时间】：2019-10-31 06:39:59
【问题描述】：

我是使用 Flutter 的新手，在编写应用程序时遇到了一个问题，即如何将 SliverAppBar 默认设置为折叠状态。为了解决我的困惑，我查看了颤振的文档，不幸的是我找不到解决方案，所以我在这里。

下面是我的代码，如果你知道如何解决它，请帮助我。谢谢大家。

class CollapsingBarLayoutState extends State<CollapsingBarLayout>
    with TickerProviderStateMixin {
  final List<ListItem> listData = [];

  @override
  Widget build(BuildContext context) {
    for (int i = 0; i < 20; i++) {
      listData.add(new ListItem("$i", Icons.cake));
    }
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              pinned: true,
              centerTitle: false,
              snap: true,
              floating: true,
              titleSpacing: 0,
              backgroundColor: Colors.green,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: _buildBriefCalendarChildren(),
                    ),
                  ),
                  background: GridPage(
                    children: _buildCalendarPageChildren(),
                    column: 7,
                    row: 5,
                  )),
            ),
          ];
        },
        body: Center(
          child: new ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return new ListItemWidget(listData[index]);
            },
            itemCount: listData.length,
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout flutter-sliver

【解决方案1】：

有一个很好的插件https://pub.dev/packages/after_layout我在这种情况下使用过。只需添加一个 mixin，然后您需要实现的唯一方法如下所示：

  void afterFirstLayout(BuildContext context) {
    _scrollController //scroll controller of your list view under sliver
        .animateTo((expandedHeight) - collapsedHeight,
        duration: new Duration(milliseconds: 1),//0 dont work as duration
        curve: Curves.linear)
        .then((_) {
      setState(() {
        expandedPercentage = 0; //just my custom tracking of expansion percentage
      });
    });
  }

编辑 - 更好的解决方案： 初始化 new ScrollController(initialScrollOffset: expandedHeight - collapsedHeight); 并将其作为 controller 传递给您的 NestedScrollView。

【讨论】：