Flutter 导航栏 - 从另一个页面更改选项卡

Posted 2023-04-13

【中文标题】Flutter 导航栏 - 从另一个页面更改选项卡

【英文标题】：Flutter Navigation Bar - Change tab from another page

【发布时间】：2019-12-24 21:50:38

【问题描述】：

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

我有 4 个 dart 文件，分别是 navigationbar.dart、page1.dart、page2.dart、page3.dart

Navigation 页面是包含子项的应用程序的主页：

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

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

【问题讨论】：

您想从 page1 中的按钮更改选定的选项卡（导航到 page2）？是真的吗？

是的，没错

【参考方案1】：

你必须像这样更改TabControlller

1* 创建 TabController 实例

TabController _tabController;

2* 在 initState 方法中使用这个

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

3* 添加一个 Mixin 到 _HomeState

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

4* 将 TabController 分配给您的 TabBar

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

5* 将控制器传递给您的页面

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

6* 从 Page1 调用 tabController.animateTo()

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)

希望对你有帮助

【讨论】：

差点头疼，发现了这个。这很棒！非常感谢

【参考方案2】：

您可以使用IndexStack。

Demostration.

【参考方案3】：

在按钮中：

onPressed: () 
    _currentIndex = 1;
   //or which value you want 
    setState(());

在底部导航栏中：

currentIndex = _currentIndex