Flutter导航栏-另一个页面的“更改”选项卡 [英] Flutter Navigation Bar - Change tab from another page

问题描述

我希望能够以编程方式更改导航栏选项卡。我在Page1中有一个导航到Page2的按钮。当我执行此操作时，导航栏消失了，因为我没有使用导航栏选择page2。

I would like to be able to change the navigation bar tab programmatically. I have a button inside Page1 that navigates to Page2. When I perform this, the navigation bar disappears because I didn't select page2 using the navigation bar.

我在navigationbar.dart页面1上有4个dart文件。 .dart，page2.dart，page3.dart

I have 4 dart files along the lines of navigationbar.dart, page1.dart, page2.dart, page3.dart

导航页面是带有孩子的应用程序的主页：

The Navigation page is the home page of the application with the children:

final List<Widget> _children = [
      Page1(),
      Page2(),
      Page3(),
    ];

return Scaffold(
      backgroundColor: Colors.black,
      body: _children[_selectedPage],
      bottomNavigationBar: _bottomNavigationBar(context),
      resizeToAvoidBottomPadding: true,
    );

推荐答案

您必须更改 TabControlller 像这样

1 *创建TabController实例

1* Create TabController instance

TabController _tabController;

2 * initState方法使用此

2* in initState methode use this

@override
void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

3 *向_HomeState添加Mixin

3* add a Mixin to _HomeState

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {....}

4 *将TabController分配给TabBar

4* assign the TabController to your TabBar

TabBar(
      controller: _tabController,
      tabs: _yourTabsHere,
    ),

5 *将控制器传递给页面

5* Pass controller to your Pages

TabBarView(
    controller: _tabController,
    children:<Widget> [
  Page1(tabController:_tabController),
  Page2(tabController:_tabController),
  Page3(tabController:_tabController),
];

6 *调用tabController.animateTo（）从Page1

6* call tabController.animateTo() from Page1

class Page1 extends StatefulWidget {
final TabController tabController
Page1({this.tabController});
....}

class _Page1State extends  State<Page1>{
....
onButtonClick(){
  widget._tabController.animateTo(index); //index is the index of the page your are intending to (open. 1 for page2)
}
}

希望有帮助

这篇关于Flutter导航栏-另一个页面的“更改”选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！