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

- JerryLin

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

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

- Heisenbug