我有一个简单的自定义 AppBar,其中包含以下代码(为了简化,我已经去掉了一些代码。问题没有必要。):
class SimpleAppBarPageState extends StatelessWidget implements PreferredSizeWidget {
@override
Size get preferredSize => const Size.fromHeight(100);
@override
Widget build(BuildContext context) => DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
...
bottom: TabBar(
isScrollable: true,
indicatorColor: Colors.white,
indicatorWeight: 5,
tabs: [
Tab(child: Text('1',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
),
Tab(child: Text('2',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
)
],
),
elevation: 20,
titleSpacing: 20,
),
body: TabBarView(
children: [
buildPageOne(),
buildPageTwo()
],
),
),
);
现在我有两个 dart 文件,其中一个包含第一页的代码,另一个文件包含第二页的代码。
现在我希望在选择选项卡“1”时打开第一页,并在选择选项卡“2”时打开第二页。
因此我想到定义一个新的Widget来打开相应的页面。以下是我的想法:
Widget buildPageOne() {
Navigator.of(context)
.push(
MaterialPageRoute(
builder: (context) => PageOne()
),
);
}
我认为最后一个代码示例完全没有用,但它表明我的意图应该发生什么。
你们能帮我解决这个问题吗?
我会很高兴得到答案! 问候
答案 0 :(得分:2)
首先,如果您使用 Tabs,请不要使用 Navigator。 其次,您需要一个 TabController 来处理您的标签,例如您可以使用 DefaultTabController。使用 TabBar,您可以设置应用栏下方每个标签的文本/图标。在您的 TabBarView 中,您可以设置要显示的小部件。在您的情况下,省略导航器,只需提供您想要在 TabBarView
中显示的小部件DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: 'Tabs',
bottom: TabBar(
tabs:[
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.settings)),
],
),
),
body: TabBarView(
children: [
Widget1(),
Widget2()
]
),
),
);
答案 1 :(得分:0)
不要使用方法导航到新屏幕。 创建 2 个独立的无状态或有状态小部件:Widget1()、Widget2()、
并且在 TabBarView 的孩子中使用这两个小部件作为孩子。
body: TabBarView(
children: [
Widget1(),
Widget2(),
],
),
保存它们,热重启