flutter - 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) {},
),
),
),
);
}
解决方案
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"),
),
)
],
);
}
}
推荐阅读
- jquery - 通过第一个 Datepicker 中的 onChange 修改后,第二个 Bootstrap Datepicker 不会自动关闭
- r - 如何根据 NA 与字母对值进行分组
- python - 如何循环遍历熊猫数据框并重命名所有列?
- r - 如何动态地将矩阵列为R中列表中的元素
- mysql - MariaDB:如果列有索引,则不使用 EXISTS 进行选择
- django - Django关键词过滤语句
- javascript - HTML 画布的问题
- php - Symfony 5 - 远程服务器上的登录凭据无效
- android - 传递一个数组列表
从 Activtiy 到 Fragment android - mongodb - Spring Batch + MongoItemReader、ItemProcessor、MongoItemWriter + 不读取所有记录