Flutter开发：从首页跳转至对应子账户TabView的问题解决

问题背景 #

开发GoHenry克隆项目时，点击首页不同孩子的账户卡片，期望跳转至MoneyPage后自动切换到对应孩子的Tab，但目前所有卡片点击后都只显示Owen的Tab，需要实现对应跳转。

步骤1：首页跳转时传递选中的孩子索引 #

修改首页的onTap回调，将当前点击的孩子卡片索引传递给MoneyPage：

Expanded(
  child: ListView.builder(
    scrollDirection: Axis.vertical,
    itemCount: value.childTiles.length,
    itemBuilder: (context, index) {
      ChildTile individualChildTile = value.childTiles[index];
      return Padding(
        padding: const EdgeInsets.only(bottom: 10),
        child: ChildTiles(
          childTiles: individualChildTile,
          onTap: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                // 传递选中的索引给MoneyPage
                builder: (context) => MoneyPage(selectedTabIndex: index),
              ),
            );
          },
        ),
      );
    },
  ),
)

步骤2：修改MoneyPage接收并传递索引参数 #

更新MoneyPage的构造函数，添加接收选中索引的参数，并将其传递给MoneyTabBar：

import 'package:flutter/material.dart';
import '../components/widgets/money_tab_bar.dart';

class MoneyPage extends StatefulWidget {
  // 添加接收选中Tab索引的参数
  final int selectedTabIndex;
  const MoneyPage({super.key, required this.selectedTabIndex});

  @override
  State<MoneyPage> createState() => _CardsPageState();
}

class _CardsPageState extends State<MoneyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: const IconThemeData(color: Colors.black),
        actions: const [
          Padding(
            padding: EdgeInsets.only(right: 20.0),
            child: Icon(Icons.pie_chart_outline, color: Colors.black),
          ),
        ],
        backgroundColor: Colors.white,
        elevation: 0,
        title: const Text(
          'Money',
          style: TextStyle(color: Colors.black, fontSize: 16),
        ),
      ),
      // 将选中索引传递给MoneyTabBar
      body: MoneyTabBar(selectedTabIndex: widget.selectedTabIndex),
    );
  }
}

步骤3：改造MoneyTabBar为StatefulWidget并控制默认Tab #

将MoneyTabBar从Stateless改为Stateful，使用TabController来动态设置初始选中的Tab：

import 'package:flutter/material.dart';
import '../../pages/eloise_tab.dart';
import '../../pages/henry_tab.dart';
import '../../pages/owen_tab.dart';

class MoneyTabBar extends StatefulWidget {
  final int selectedTabIndex;
  const MoneyTabBar({
    super.key,
    required this.selectedTabIndex,
  });

  @override
  State<MoneyTabBar> createState() => _MoneyTabBarState();
}

class _MoneyTabBarState extends State<MoneyTabBar> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 初始化TabController，设置初始选中的索引
    _tabController = TabController(
      length: 3,
      vsync: this,
      initialIndex: widget.selectedTabIndex,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          TabBar(
            controller: _tabController,
            padding: const EdgeInsets.only(left: 80, right: 80),
            indicatorColor: Colors.red,
            indicatorSize: TabBarIndicatorSize.label,
            labelColor: Colors.black,
            unselectedLabelColor: Colors.grey,
            labelStyle: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
            tabs: const [
              Tab(text: 'Owen'),
              Tab(text: 'Eloise'),
              Tab(text: 'Henry'),
            ],
          ),
          const SizedBox(height: 25),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: const [
                OwenTab(),
                EloiseTab(),
                HenryTab(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

补充说明 #

• 确保childTiles的顺序和Tab的顺序一致（Owen对应索引0，Eloise对应1，Henry对应2），如果顺序不一致，可以通过孩子的名字映射到对应的索引，比如用Map：{'Owen':0, 'Eloise':1, 'Henry':2}，传递名字后再转换为索引。
• 使用TabController可以灵活控制Tab的切换，相比DefaultTabController更适合动态设置初始选中项的场景。

内容的提问来源于stack exchange，提问作者Jeff Barra