Flutter中如何点击FloatingActionButton切换TabBar指定标签页

核心修改点 #

• 原代码中MyHomePage为无状态组件，且依赖DefaultTabController自动生成的控制器，无法手动触发标签切换，需要将其改为有状态组件，手动持有TabController实例
• 修正原代码中的语法错误：原代码Scaffold括号闭合位置错误导致TabBarView被放在组件树错误位置，且Center组件不存在margin、width属性，需要调整对应布局
• 在浮动按钮点击回调中调用控制器的切换方法，实现标签跳转，页面销毁时释放控制器避免内存泄漏

完整可运行代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(scaffoldBackgroundColor: const Color(0xFF101010)),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 初始化Tab控制器，标签总数为2
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    // 页面销毁时释放控制器，避免内存泄漏
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: createTabBar(_tabController),
      ),
      body: TabBarView(
        // 绑定控制器到TabBarView
        controller: _tabController,
        children: [
          // 修正原Center组件的错误参数，用Container实现边距和宽度设置
          Container(
            margin: const EdgeInsets.only(top: 15.0, bottom: 15.0),
            width: 500,
            child: Center(
              child: FloatingActionButton(
                onPressed: () {
                  // 点击跳转到索引为1的Portfolio标签页，索引从0开始计数
                  _tabController.animateTo(1);
                },
              ),
            ),
          ),
          const Center(
            child: Text(
              "Portfolio",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

  TabBar createTabBar(TabController controller) {
    return TabBar(
      // 绑定控制器到TabBar
      controller: controller,
      tabs: [
        Row(
          children: const [
            Icon(Icons.home_rounded),
            SizedBox(width: 5),
            Text("Home"),
          ],
        ),
        Row(
          children: const [
            Icon(Icons.palette_rounded),
            SizedBox(width: 5),
            Text("Portfolio")
          ],
        ),
      ],
    );
  }
}

关键逻辑说明 #

• 标签索引从0开始计数：当前2个标签的索引分别为0（Home页）、1（Portfolio页），需要跳转到哪个标签就给animateTo方法传入对应索引即可
• animateTo方法会自带平滑的切换动画，如果不需要动画可以替换为_tabController.index = 目标索引直接跳转
• 混入SingleTickerProviderStateMixin是为了给TabController提供vsync参数，是Flutter动画控制器的必要配置

内容的提问来源于stack exchange，提问作者Asadbek Nematov