flutter基础布局之 TabBar

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

computerclass

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

阅读量289

点赞数

分类专栏： flutter 文章标签： flutter tabbar

本文链接：https://blog.csdn.net/computerclass/article/details/115269229

版权

flutter 专栏收录该内容

220 篇文章 1 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

主要内容有：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}';
    });
  }
})