Flutter子账户Tab页面动态加载余额问题求助

开发Flutter应用时遇到以下问题：用户点击首页的子账户条目后，跳转至对应的Tab页面，需要展示数据模型中该账户的余额，但目前Tab页面的余额是硬编码值（如OwenTab中的Text('\$20.00')），无法动态显示对应账户的实际余额。

步骤1：修改Tab页面组件，添加数据接收参数 #

以OwenTab为例，修改为接收ChildTile类型的参数，EloiseTab、HenryTab做相同修改：

import 'package:flutter/material.dart';
import '../../models/child_tile.dart';

class OwenTab extends StatelessWidget {
  final ChildTile childData;

  const OwenTab({super.key, required this.childData});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          childData.balance,
          style: const TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              '可用余额',
              style: TextStyle(fontSize: 15),
            ),
            Icon(Icons.keyboard_arrow_down_rounded, size: 30),
          ],
        ),
      ],
    );
  }
}

步骤2：修改MoneyTabBar，获取并传递数据 #

在MoneyTabBar中通过Consumer获取GoHenryData实例，根据索引将对应ChildTile数据传递给每个Tab页面：

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

class MoneyTabBar extends StatelessWidget {
  final int tabIndex;

  const MoneyTabBar({
    super.key,
    required this.tabIndex,
  });

  @override
  Widget build(BuildContext context) {
    return Consumer<GoHenryData>(
      builder: (context, data, child) {
        return DefaultTabController(
          initialIndex: tabIndex,
          length: 3,
          child: Scaffold(
            backgroundColor: Colors.white,
            body: Column(
              children: [
                const TabBar(
                  padding: EdgeInsets.only(left: 80, right: 80),
                  indicatorColor: Colors.red,
                  indicatorSize: TabBarIndicatorSize.label,
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.grey,
                  labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
                  tabs: [
                    Tab(text: 'Owen'),
                    Tab(text: 'Eloise'),
                    Tab(text: 'Henry'),
                  ],
                ),
                const SizedBox(height: 25),
                Expanded(
                  child: TabBarView(
                    children: [
                      OwenTab(childData: data.childTiles[0]),
                      EloiseTab(childData: data.childTiles[1]),
                      HenryTab(childData: data.childTiles[2]),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

步骤3：同步其他Tab页面修改 #

确保EloiseTab和HenryTab的代码结构与OwenTab一致：添加ChildTile参数，将硬编码的余额文本替换为childData.balance。

完成以上修改后，用户点击首页子账户跳转至对应Tab页面时，即可动态展示数据模型中该账户的实际余额。

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