首页 > 解决方案 > Flutter 如何使用 SliverToBoxAdapter 添加 tabbarview?

问题描述

我试图使用 tabbarview 在我的应用程序上查看一个新栏,但我没有尝试任何工作,有人可以帮助我吗?

这是我的代码:

SliverToBoxAdapter _buildRegionTabBar() { //brasil e mundo
    return SliverToBoxAdapter(
      child: DefaultTabController(
        length: 2,
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 20.0),
          height: 50.0,
          decoration: BoxDecoration(
            color: Colors.white24,
            borderRadius: BorderRadius.circular(25.0),
          ),
          child: TabBar(
            indicator: BubbleTabIndicator(
              tabBarIndicatorSize: TabBarIndicatorSize.tab,
              indicatorHeight: 40.0,
              indicatorColor: Colors.white,
            ),
            labelStyle: Styles.tabTextStyle,
            labelColor: Colors.black,
            unselectedLabelColor: Colors.white,
            tabs: <Widget>[
              Tab (text:'Brasil'),
              Tab (text:'Mundo'),
            ],
            onTap: (index) {},
          ),
        ),
      ),
    );
  }

标签: flutter

解决方案


class ExampleTabbar extends StatelessWidget {
  const ExampleTabbar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: DefaultTabController(
          length: 2,
          child: NestedScrollView(
              key: PageStorageKey<String>('keepTabScroll'),
              headerSliverBuilder: (context, _) {
                return [
                  SliverOverlapAbsorber(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        context),
                    sliver: SliverAppBar(
                      title: Text("Tabbar"),
                      forceElevated: _,
                      bottom: TabBar(tabs: [
                        Tab(
                          text: 'Tab A',
                        ),
                        Tab(
                          text: 'Tab B',
                        ),
                      ]),
                    ),
                  )
                ];
              },
              body: TabBarView(
                children: [
                  TabA(),
                  TabB(),
                ],
              ))),
    );
  }
}

class TabA extends StatelessWidget {
  const TabA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverOverlapInjector(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
        SliverPadding(
          padding: EdgeInsets.symmetric(vertical: 24, horizontal: 16),
          sliver: SliverToBoxAdapter(
            child: Text("Tab A"),
          ),
        )
      ],
    );
  }
}

class TabB extends StatelessWidget {
  const TabB({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverOverlapInjector(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
        SliverPadding(
          padding: EdgeInsets.symmetric(vertical: 24, horizontal: 16),
          sliver: SliverToBoxAdapter(
            child: Text("Tab B"),
          ),
        )
      ],
    );
  }
}




推荐阅读