如何修改ThingsBoard Flutter应用的导航栏（AppBar）

1. 先定位导航栏的核心控制文件 #

ThingsBoard的Flutter项目里，顶部和底部导航栏一般是封装好的组件，先找到这几个关键文件：

• 顶部导航栏：lib/ui/widgets/tb_app_bar.dart
• 底部导航栏：大概率在lib/ui/pages/main/main_page.dart或者lib/ui/widgets/tb_bottom_nav_bar.dart

2. 搞定顶部AppBar样式 #

如果直接改tb_app_bar.dart的颜色没生效，基本是主题样式覆盖了局部设置，试试这两种方法：

方法一：强制给TbAppBar指定颜色 #

修改TbAppBar的构造函数和build方法，直接硬编码或者传入自定义颜色：

class TbAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color? backgroundColor;
  // 其他参数...

  const TbAppBar({
    Key? key,
    this.backgroundColor = Colors.deepPurple, // 直接设置默认背景色
    // 其他参数...
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: backgroundColor, // 确保这里用自定义的颜色
      // 其他AppBar属性...
    );
  }
}

方法二：全局修改主题配置 #

找到项目的主题文件（比如lib/core/constants/app_theme.dart），修改ThemeData里的appBarTheme：

ThemeData appTheme() {
  return ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: Colors.deepPurple,
      foregroundColor: Colors.white, // 标题、图标颜色
    ),
    // 其他主题配置...
  );
}

3. 修改底部导航栏样式 #

底部导航栏的修改逻辑和顶部类似：

方法一：直接修改底部导航组件 #

找到底部导航栏的封装类（比如TbBottomNavigationBar），调整颜色属性：

class TbBottomNavigationBar extends StatelessWidget {
  final int currentIndex;
  final Function(int) onTap;

  const TbBottomNavigationBar({
    Key? key,
    required this.currentIndex,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: onTap,
      backgroundColor: Colors.grey[900], // 底部栏背景色
      selectedItemColor: Colors.blueAccent, // 选中项颜色
      unselectedItemColor: Colors.grey[400], // 未选中项颜色
      // 其他属性...
    );
  }
}

方法二：全局主题配置底部栏 #

同样在app_theme.dart里添加bottomNavigationBarTheme：

ThemeData appTheme() {
  return ThemeData(
    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
      backgroundColor: Colors.grey[900],
      selectedItemColor: Colors.blueAccent,
      unselectedItemColor: Colors.grey[400],
    ),
    // 其他主题配置...
  );
}

4. 处理系统级导航栏（不是应用内的底部栏） #

如果是想改手机系统自带的底部导航栏颜色，之前禁用SystemUIOverlay没生效，可能是项目框架自动恢复了设置，试试在主页面的initState里强制设置：

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  void initState() {
    super.initState();
    // 强制设置系统状态栏和导航栏样式
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.deepPurple, // 顶部状态栏颜色
      systemNavigationBarColor: Colors.grey[900], // 系统底部导航栏颜色
      statusBarIconBrightness: Brightness.light, // 状态栏图标亮度
      systemNavigationBarIconBrightness: Brightness.light, // 系统底部栏图标亮度
    ));
  }

  @override
  Widget build(BuildContext context) {
    // 页面内容...
  }
}

5. 检查状态管理的影响 #

ThingsBoard用了Bloc这类状态管理工具，有些样式可能是从状态变量里读取的。可以检查AppBloc之类的核心状态类，看看有没有控制导航栏样式的变量，修改它的初始值或者更新逻辑就行。

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