如何使用tabBar实现sliverAppBar
如何使用tabBar实现sliverAppBar
提问于 2018-06-07 20:53:02
flutter文档显示了一个demo对于SliverAppBar+TabBar+TabBarView with ListView使用NestedScrollView，而且它有点复杂，所以我想知道有没有一种简单而明确的方法来实现它。我试过这个：
CustomScrollView
slivers:
SliverAPPBar
bottom: TabBar
TabBarView
children: MyWidget(list or plain widget)获取错误：
flutter:以下断言被抛出构建可滚动(axisDirection:对，物理：
RenderSliver : RenderViewport需要类型为flutter的子项，但收到的子项类型为_RenderExcludableScrollSemantics。
flutter: RenderObjects期望特定类型的子项，因为它们在布局和绘制期间与子项进行协调。例如，RenderSliver不能是RenderBox的子级，因为RenderSliver不理解RenderBox布局协议。
和
flutter:抛出了另一个异常：'package:flutter/src/widgets/framework.dart'：断言失败:第3497行pos 14：'owner。_debugCurrentBuildTarget == this'：不是真的。
下面是我的代码：
import 'package:flutter/material.dart';
main(List args) {
runApp(MyScrollTabListApp());
}
class MyScrollTabListApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(title: "aa", home: MyScrollTabListHomePage());
}
}
class MyScrollTabListHomePage extends StatefulWidget {
@override
MyScrollTabListHomePageState createState() {
return new MyScrollTabListHomePageState();
}
}
class MyScrollTabListHomePageState extends State
with SingleTickerProviderStateMixin {
final int _listItemCount = 300;
final int _tabCount = 8;
TabController _tabController;
@override
void initState() {
_tabController = TabController(length: _tabCount, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 240.0,
title: Text("Title"),
pinned: true,
bottom: TabBar(
controller: _tabController,
isScrollable: true,
tabs: List.generate(_tabCount, (int i) {
return Tab(text: "TAB$i");
}),
),
),
TabBarView(
controller: _tabController,
children: List.generate(_tabCount, (int i) {
return Text('line $i');
}),
),
],
),
);
}
}对于官方演示，它使用的struct如下所示
DefaultTabController
NestedScrollView
headerSliverBuilder
SliverOverlapAbsorber
handle
SliverAppBar
TabBarView
CustomScrollView
SliverOverlapInjector
handle
SliverPaddingStack Overflow用户
发布于 2021-02-26 00:08:12
是啊。您可以使用NestedScrollView来实现Tabs。下面是一些附加代码。
class AppView extends StatelessWidget {
final double _minValue = 8.0;
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return Scaffold(
appBar: MyAppBar(),
drawer: DrawerDialog(),
body: DefaultTabController(
length: 3,
child: SafeArea(
child: NestedScrollView(
body: TabBarView(
children: [Text("Page 1"), Text("Page 2"), Text("Page 3")],
),
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) => [
SliverPadding(
padding: EdgeInsets.all(_minValue * 2.5),
sliver: SliverToBoxAdapter(
child: Text(
"Hiding Header",
style: textTheme.headline6,
textAlign: TextAlign.center,
),
),
),
SliverAppBar(
backgroundColor: Colors.grey[100],
pinned: true,
elevation: 12.0,
leading: Container(),
titleSpacing: 0.0,
toolbarHeight: 10,
bottom: TabBar(tabs: [
Tab(
child: Text(
"All",
style: textTheme.subtitle2,
),
),
Tab(
child: Text(
"Categories",
style: textTheme.subtitle2,
),
),
Tab(
child: Text(
"Upcoming",
style: textTheme.subtitle2,
),
),
]),
),
],
),
),
),
);}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50741732
复制相关文章
相似问题
腾讯云开发者
