如何在颤振默认选项卡控制器中更改选项卡?

Question

我正在使用 Flutter 默认选项卡控制器来显示选项卡视图。我需要在单击按钮时更改选项卡，我尝试使用 setState 更改选项卡，但失败了。这些是我的代码：

class _TabPageState extends State<TabPage> implements TabView {
int tabIndex = 0;
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
initialIndex: tabIndex,
child: Scaffold(
appBar: AppBar(),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
Container(
color: Colors.green,
child: Center(
child: RaisedButton(
child: Text('to Tab 3'),
onPressed: () {
setState(() {
tabIndex = 2;
});
}),
),
),
Container(color: Colors.red),
Container(color: Colors.yellow),
Container(color: Colors.cyan),
],
),
bottomNavigationBar: TabBar(
labelColor: Colors.black45,
tabs: [
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('green')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('red')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('yellow')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('cyan')),
],
),
),
);
}
}

Answer 1

您可以在没有有状态小部件的情况下执行此操作，方法是使用DefaultTabController.of(context)检索控制器，然后对其调用.animateTo(index)。

class TabPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
initialIndex: tabIndex,
child: Scaffold(
appBar: AppBar(),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
Container(
color: Colors.green,
child: Center(
child: GoToThirdTabButton(),
),
),
Container(color: Colors.red),
Container(color: Colors.yellow),
Container(color: Colors.cyan),
],
),
bottomNavigationBar: TabBar(
labelColor: Colors.black45,
tabs: [
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('green')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('red')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('yellow')),
Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('cyan')),
],
),
),
);
}
}
class GoToThirdTabButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
child: Text('to Tab 3'),
onPressed: () {
DefaultTabController.of(context).animateTo(2);
}
);
}
}

按钮必须是它自己的小部件，因此它看到的context将附加选项卡控制器。

Answer 2

代码高尔夫解决方案

如果要在不创建全新 StatelessWidget 的情况下访问 DefaultTabController，则可以添加 Builder 小组件以添加新的上下文图层。这使得你的按钮可以"看到"DefaultTabController：

Scaffold(
body: SafeArea(
child: DefaultTabController(
initialIndex: 0,
length: 3,
child: Builder( // Add this
builder: (context) {
return Column(
children: [
TabBar(
controller: DefaultTabController.of(context),
labelColor: Colors.black,
tabs: [
Tab(text: 'One'),
Tab(text: 'Two'),
Tab(text: 'Three'),
],
),
Expanded(child: Center(
child: OutlinedButton(
child: Text('Three'),
onPressed: (){
DefaultTabController.of(context)?.animateTo(2);
},
),
))
],
);
}
),
),
),
);

Answer 3

试试这个：

import 'package:flutter/material.dart';
class TabExample extends StatefulWidget {
@override
_TabExampleState createState() => _TabExampleState();
}
class _TabExampleState extends State<TabExample> {
var tabIndex = 0;
@override
Widget build(BuildContext context) {
var childList = [
Container(
color: Colors.green,
child: Center(
child: RaisedButton(
child: Text('to Tab 3'),
onPressed: () {
setState(() {
tabIndex = 2;
});
}),
),
),
Container(color: Colors.red),
Container(color: Colors.yellow),
Container(color: Colors.cyan),
];
return DefaultTabController(
length: 4,
initialIndex: tabIndex,
child: Scaffold(
appBar: AppBar(),
body: childList[tabIndex],
bottomNavigationBar: TabBar(
onTap: (index) {
setState(() {
tabIndex = index;
});
},
labelColor: Colors.black,
tabs: <Widget>[
Tab(text: 'Green'),
Tab(text: 'Red'),
Tab(text: 'Yellow'),
Tab(text: 'Cyan'),
],
),
),
);
}
}