从 TabBarView Child 导航到另一个 Route（全屏）
Posted
技术标签:
【中文标题】从 TabBarView Child 导航到另一个 Route（全屏）【英文标题】：Navigating from a TabBarView Child to another Route (full screen) 【发布时间】：2020-01-30 18:03:48 【问题描述】：我有一个包含 4 个选项卡的 TabBarView。它们都有一个按钮，可用于导航到另一条路线，但导航是在选项卡本身中完成的，即选项卡式 Appbar 仍然存在，如何在没有选项卡式应用程序栏的情况下导航到这些路线。
编辑： 在主页上有一些按钮可以将用户带到标签页， 在该页面上，TabBarView 具有传递不同字符串的第 2 页，现在第 2 页用于调用一个小部件，该小部件验证用户登录、注销和内容并返回正确的小部件。当用户登录时，会有一个 Fab 将他们带到一条新路线，现在该路线仍在我想要更改的选项卡式视图中导航。
标签视图
home: DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(text: ("Numbers")),
Tab(text: ("Relationship")),
Tab(text: ("Word")),
Tab(text: ("Sentence"))
],
),
------
------
),
),
),
),
body: TabBarView(
children: [
Page2("Number" ),
Page2("Relationship"),
Page2("Word"),
Page2("Sentence"),
],
),
),
),
);
第2页
return new MaterialApp(
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Scaffold(
body: new RootPage(auth: new Auth()
)
)
);
登录
return new HomePage(
userId: _userId,
auth: widget.auth,
onSignedOut: _onSignedOut,
);
工厂
return new Scaffold(
-----
-----
floatingActionButton: FloatingActionButton(
onPressed: ()
//_showDialog(context);
Navigator.push(context, MaterialPageRoute(builder: (context)=>Levels(
auth: widget.auth,
userId: widget.userId,
onSignedOut: widget.onSignedOut,
)),);
,
【问题讨论】：
【参考方案1】：您可以使用 Scaffold 包装这些目标页面或路由 代码sn-p
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
完整代码
import 'package:flutter/material.dart';
void main()
runApp(AppBarBottomSample());
class AppBarBottomSample extends StatefulWidget
@override
_AppBarBottomSampleState createState() => _AppBarBottomSampleState();
class _AppBarBottomSampleState extends State<AppBarBottomSample>
with SingleTickerProviderStateMixin
TabController _tabController;
@override
void initState()
super.initState();
_tabController = TabController(vsync: this, length: choices.length);
@override
void dispose()
_tabController.dispose();
super.dispose();
@override
Widget build(BuildContext context)
return MaterialApp(
home: DefaultTabController(
length: 6,
child: Scaffold(
appBar: AppBar(
title: const Text('AppBar Bottom Widget'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_bike)),
Tab(icon: Icon(Icons.directions_boat)),
Tab(icon: Icon(Icons.directions_bus)),
Tab(icon: Icon(Icons.directions_railway)),
Tab(icon: Icon(Icons.directions_walk)),
],
controller: _tabController,
isScrollable: true,
),
),
body: TabBarView(
controller: _tabController,
children: choices.map((Choice choice)
return Padding(
padding: const EdgeInsets.all(16.0),
child: ChoiceCard(choice: choice),
);
).toList(),
),
),
),
);
class Choice
const Choice(this.title, this.icon);
final String title;
final IconData icon;
const List<Choice> choices = const <Choice>[
const Choice(title: 'CAR', icon: Icons.directions_car),
const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
const Choice(title: 'BOAT', icon: Icons.directions_boat),
const Choice(title: 'BUS', icon: Icons.directions_bus),
const Choice(title: 'TRAIN', icon: Icons.directions_railway),
const Choice(title: 'WALK', icon: Icons.directions_walk),
];
class ChoiceCard extends StatelessWidget
const ChoiceCard(Key key, this.choice) : super(key: key);
final Choice choice;
@override
Widget build(BuildContext context)
final TextStyle textStyle = Theme.of(context).textTheme.display1;
return Card(
color: Colors.white,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(choice.icon, size: 128.0, color: textStyle.color),
Text(choice.title, style: textStyle),
RaisedButton(
child: Text('Click Button '),
onPressed: ()
print('hi');
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyHomePage(title: "hi",)),
);
,
)
],
),
),
);
class MyApp extends StatelessWidget
// This widget is the root of your application.
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
int _counter = 0;
void _incrementCounter()
setState(()
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
);
@override
Widget build(BuildContext context)
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
【讨论】：
它不起作用，我检查并确保目的地包裹在脚手架中【参考方案2】：我通过删除 TabBarView 中的 Page2 调用并直接调用 rootpage 来解决它。
【讨论】：
你能分享一下你是怎么解决的吗？你怎么直接调用rootpage？？ @Akshit Sharma 在标签视图中，我没有调用Page2，而是直接调用了rootpage。 @urvashi。正文：TabBarView（孩子：[ Rootpage（“数字”）]， 谢谢，帮了大忙。【参考方案3】：我也遇到了这个问题，我是这样解决的。
比方说，在 HomePage 我们有 TabBarView， 在TabBarView中，我们有Tab1、Tab2和Tab3，打开Page1，
Page2 和 Page3。
在Page1上有一个TextButton，我们点击后打开Page4
就可以了。
主页的BuildContextbuild method与Page1、Page2和Page3build method的BuildContext不同。
class _HomePageState extends State<HomePage>
@override
Widget build(BuildContext context) //<--I'm talking about this context
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
bottom: TabBar(
tabs: [Tab1, Tab2, Tab3],),),
body: TabBarView(
children: [ Page1, Page2, Page3,]
),
class _Page1State extends State<Page1>
@override
Widget build(BuildContext context) //<--This is the context that got passed to Navigator.push(context...........
//Instead we need the context from HomePage, or from framework.dart, to open the new page in fullscreen
return Scaffold(
appBar: AppBar(
title: Text(widget.title),),
body: Center(
child: TextButton(child: Text('Go to Page4'),
onPressed: ()
//Here, the context is passed from Page1 build
Navigator.push(context, MaterialPageRoute(builder: (newContext) => Page4()));
)
),
所以一边打电话
Navigator.push(context, MaterialPageRoute(builder: (newContext) => Page4()));
如果传递的context 来自Page1 构建方法，则新页面即Page4 将仅在Page1 上打开，因此顶部的TabBar仍然可见。
但是如果这里传递的context来自主页build method，或者来自framework.dart，那么新的页面，即Page4将全屏打开。
所以要解决这个问题，我们要么需要
将context从主页传递到Navigator.push....or
通过将 Page1 的 BuildContext 重命名为其他名称，从 framework.dark 传递 context。
像这样：---
class _Page1State extends State<Page1>
@override
Widget build(BuildContext Page1Context) //<--We are just renaming it to something else.
return Scaffold(
appBar: AppBar(
title: Text(widget.title),),
body: Center(
child: TextButton(child: Text('Go to Page4'),
onPressed: ()
//Now, the context passed here is NOT from Page1
Navigator.push(context, MaterialPageRoute(builder: (newContext) => Page4()));
)
),
在 Android Studio 中，您可以按控制并单击Navigator.push(context.... 中的context，然后它应该会打开framework.dart 文件。这意味着context 来自framework.dart 文件。
【讨论】：
以上是关于从 TabBarView Child 导航到另一个 Route（全屏）的主要内容，如果未能解决你的问题，请参考以下文章
Flutter - 如何在 TabBarView 的主体内导航？