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

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

Flutter：如何将SliverAppBar设置为默认折叠

1 个答案: