Flutter：如何设置 SliverAppBar 默认折叠

Question

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

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

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

Answer 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
      });
    });
  }

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