flutter TabBar动态更新
时间: 2023-12-02 22:05:12 浏览: 123
要在Flutter中动态更新TabBar,可以使用TabController。TabController是一个控制TabBar和TabBarView的类,它可以让你在TabBar中切换选项卡时更新TabBarView中的内容。以下是一个简单的示例代码:
```dart
class MyTabbedPage extends StatefulWidget {
const MyTabbedPage({Key? key}) : super(key: key);
@override
State<MyTabbedPage> createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController, tabs: const [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
body: TabBarView(
controller: _tabController,
children: const [
Center(child: Text('Tab 1')),
Center(child: Text('Tab 2')),
Center(child: Text('Tab 3')),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_tabController.animateTo(1); // 切换到第二个选项卡
},
child: const Icon(Icons.arrow_forward),
),
);
}
}
```
在这个示例中,我们创建了一个TabController并将其与TabBar和TabBarView一起使用。我们还在Scaffold中添加了一个FloatingActionButton,当用户点击它时,我们使用TabController的animateTo方法将选项卡切换到第二个选项卡。
阅读全文