Flutter - 使用 SliverAppBar 显示空状态答案

【问题标题】：Flutter - Show empty state with SliverAppBarFlutter - 使用 SliverAppBar 显示空状态
【发布时间】：2020-07-20 15:51:16
【问题描述】：

我正在使用 SliverAppBar 和 SliverLsit，它们被包裹在 CustomScrollView 中。当没有商店时，我想在SilverAppBar 下方显示一个空屏幕。有没有好的方法来做到这一点？我的解决方案是基本上显示不同的 AppBar 和屏幕，但感觉很 hacky 并且涉及大量代码。

编辑：此外，RefreshIndictor 小部件不适用于具有以下 impl 的空状态。

class ListPageSliver extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SearchViewModel model = Provider.of<SearchViewModel>(context);
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: RefreshIndicator(
        displacement: 22,
        onRefresh: () {
          return model.onRefreshList();
        },
        child: model.shops.isEmpty
            ? Column(
                children: [
                  AppBar(title: SearchBar()),
                  SearchActions(),
                  Expanded(
                    child: Align(
                      alignment: Alignment.center,
                      child: NNMessagePage(
                        MESSAGE_NO_SHOPS,
                        actionText: BUTTON_ADD_SHOP,
                        onAction: () {
                          Navigator.pushNamed(context, myShopsRoute);
                        },
                      )
                    )
                  )
                ],
              )
            : CustomScrollView(
                slivers: [
                  SliverAppBar(
                    backgroundColor: Color(PRIMARY_LIGHT),
                    title: SearchBar(),
                    pinned: false,
                    floating: true,
                    expandedHeight: 186,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Padding(
                        padding: EdgeInsets.only(top: 82),
                        child: Container(color: Color(PRIMARY_LIGHT), child: SearchActions()),
                      ),
                    ),
                  ),
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return ShopItem(model.shops[index], model.userLocation);
                      },
                      childCount: model.shops.length,
                    ),
                  ),
                ],
              ),
      )
    );
  }
}

【问题讨论】：

请分享您的脚手架的全部代码。在 Widgets 中间截断，让任何人都难以调试。
对不起！我刚刚更新了代码以包含整个小部件。

标签： flutter

【解决方案1】：

你可以用空容器制作一个 slivertoboxadapter

class ListPageSliver extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SearchViewModel model = Provider.of<SearchViewModel>(context);
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: RefreshIndicator(
        displacement: 22,
        onRefresh: () {
          return model.onRefreshList();
        },
        child: CustomScrollView(
                slivers: [
                  model.shops.isEmpty ?
                    SliverToBoxAdapter( child: Container() )
                  : SliverAppBar(
                    backgroundColor: Color(PRIMARY_LIGHT),
                    title: SearchBar(),
                    pinned: false,
                    floating: true,
                    expandedHeight: 186,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Padding(
                        padding: EdgeInsets.only(top: 82),
                        child: Container(color: Color(PRIMARY_LIGHT), child: SearchActions()),
                      ),
                    ),
                  ),
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return ShopItem(model.shops[index], model.userLocation);
                      },
                      childCount: model.shops.length,
                    ),
                  ),
                ],
              ),
      )
    );
  }
}

【讨论】：