Question

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

我有4个dart文件，分别位于navigationbar.dart，page1.dart，page2.dart，page3.dart

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

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

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

Answer 1

您必须像这样更改TabControlller

1 *创建TabController实例

TabController _tabController;

initState方法中的

2 *使用此

@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)
}
}

希望有帮助

Answer 2

您可以使用IndexStack。

Demostration.

Answer 3

在按钮中：

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

在底部导航栏中：

currentIndex = _currentIndex

Flutter导航栏-另一页上的“更改”选项卡

3 个答案: