Question

我正在使用SliverLsit和CustomScrollView包裹在SilverAppBar中。如果没有商店，我想在RefreshIndictor下方显示一个空白屏幕。有什么好方法吗？我在解决方案方面的工作基本上是显示不同的AppBar和屏幕，但是感觉很hacky，涉及很多代码。

编辑：此外，带有以下含义的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, ), ), ], ), ) ); } }小部件不适用于空状态。

City

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

Flutter-使用SliverAppBar显示空状态

1 个答案: