引入TDEE数据后Flutter应用底部导航栏不显示问题

问题1：CustomBottomNavBar构造函数参数写法错误 #

你的CustomBottomNavBar构造函数中，参数使用widget.onTabSelected和widget.selectedIndex是语法错误，正确写法应该用this.来绑定类成员变量，这种错误会导致组件无法正常构建，直接造成底部导航栏不显示。

问题2：HomeScreen中tdee未初始化就使用 #

late double tdee声明后未初始化就传给HomeContent，同时_screens列表在State初始化阶段就创建，此时tdee还未赋值，会触发运行时异常，导致整个页面渲染失败，导航栏自然无法显示。

修正后的代码 #

1. CustomBottomNavBar.dart 修正

class CustomBottomNavBar extends StatefulWidget {
  final int selectedIndex; // 跟踪当前选中的索引
  final Function(int) onTabSelected; // 通知父组件的回调

  const CustomBottomNavBar({
    Key? key,
    required this.onTabSelected,
    required this.selectedIndex,
  }) : super(key: key);

  @override
  _CustomBottomNavBarState createState() => _CustomBottomNavBarState();
}

class _CustomBottomNavBarState extends State<CustomBottomNavBar> {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      backgroundColor: const Color.fromRGBO(57, 57, 57, 1), // 背景色
      selectedItemColor: Colors.white, // 选中图标颜色
      unselectedItemColor: Colors.grey, // 未选中图标颜色
      currentIndex: widget.selectedIndex, // 跟踪选中索引
      onTap: widget.onTabSelected, // 点击tab时的回调
      type: BottomNavigationBarType.fixed, // 保持标签可见
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: "首页",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.sports),
          label: "分类",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.bar_chart),
          label: "报告",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: "我的",
        ),
      ],
    );
  }
}

2. HomeScreen.dart 修正

import 'package:flutter/material.dart';
import 'package:getfit/screens/ProfileScreen.dart';
import 'package:getfit/screens/ReportScreen.dart';
import 'package:getfit/widgets/CustomBottomNavBar.dart';
import 'CategoryScreen.dart';
import 'package:pedometer/pedometer.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
      theme: ThemeData(fontFamily: 'AgencyFB'), // 全局字体样式
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0; // 跟踪底部tab选中索引
  late double tdee; // 每日总能量消耗变量
  late List<Widget> _screens;

  // 获取存储的TDEE数据
  Future<double> _storedTDEE() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getDouble('tdee') ?? 0;
  }

  // 更新选中索引的状态
  void _onTabSelected(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  void initState() {
    super.initState();
    // 初始化tdee并更新页面列表
    _initTDEE();
  }

  Future<void> _initTDEE() async {
    tdee = await _storedTDEE();
    setState(() {
      _screens = [
        HomeContent(tdee: tdee),
        const CategoryScreen(),
        const ReportScreen(),
        const ProfileScreen(),
      ];
    });
  }

  @override
  Widget build(BuildContext context) {
    // 数据未初始化时显示加载状态
    if (_screens.isEmpty) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      bottomNavigationBar: CustomBottomNavBar(
        selectedIndex: _selectedIndex,
        onTabSelected: _onTabSelected,
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: _screens,
      ), // 显示选中的页面
    );
  }
}

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