flutter基础布局之 TabBar

最新推荐文章于 2024-07-15 11:59:01 发布

原创最新推荐文章于 2024-07-15 11:59:01 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #tabbar

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文探讨了在构建带有底部导航栏（TabBar）和主体内容（TabBarView）的UI时，如何避免在每个TabBarView中嵌套Scaffold。通过监听TabController，可以实现在切换Tab时更新AppBar的标题，提高用户体验。示例代码展示了如何设置TabController监听器以动态改变AppBar标题。

主要内容有：TabBar、TabBarView、TabController、TabPageSelector。

It is typically not necessary to nest Scaffolds. For example, in a tabbed UI, where the bottomNavigationBar is a TabBar and the body is a TabBarView, you might be tempted to make each tab bar view a scaffold with a differently titled AppBar. Rather, it would be better to add a listener to the TabController that updates the AppBar

TabController(vsync: tickerProvider, length: tabCount)..addListener(() {
  if (!tabController.indexIsChanging) {
    setState(() {
      // Rebuild the enclosing scaffold with a new AppBar title
      appBarTitle = 'Tab ${tabController.index}';
    });
  }
})