如何修改Flutter NavBar组件的图标颜色？

有几种常见的实现方式，根据你的NavBar组件类型选择：

1. 自定义NavBar组件直接修改 #

如果NavBar是你自己编写的组件，直接给每个Icon组件添加color属性即可：

直接修改组件内部代码 #

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(
          leading: Icon(Icons.home, color: Colors.blue), // 直接设置蓝色
          title: Text("首页"),
        ),
        ListTile(
          leading: Icon(Icons.settings, color: Colors.blue),
          title: Text("设置"),
        ),
        // 其他带图标的列表项同理设置颜色
      ],
    );
  }
}

灵活的参数化方式 #

如果需要动态切换颜色，可以给NavBar添加颜色参数，提升复用性：

class NavBar extends StatelessWidget {
  final Color iconColor;

  // 设置默认颜色为蓝色，不传参时也生效
  const NavBar({this.iconColor = Colors.blue, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(
          leading: Icon(Icons.home, color: iconColor),
          title: Text("首页"),
        ),
        ListTile(
          leading: Icon(Icons.settings, color: iconColor),
          title: Text("设置"),
        ),
      ],
    );
  }
}

调用时可指定颜色：

drawer: NavBar(iconColor: Colors.blue),

2. 局部主题覆盖（无需修改NavBar代码） #

如果不想改动NavBar的内部实现，可以用Theme组件局部覆盖图标主题：

@override
Widget build(BuildContext context) {
  return Scaffold(
    drawer: Theme(
      data: Theme.of(context).copyWith(
        iconTheme: const IconThemeData(color: Colors.blue),
      ),
      child: NavBar(),
    ),
  );
}

3. 第三方库NavBar组件 #

如果你的NavBar是第三方库提供的，查看该库的文档，找到对应的颜色配置参数（通常是iconColor、iconTheme这类属性），示例如下：

drawer: NavBar(
  iconColor: Colors.blue,
  // 部分库可能需要通过主题配置：theme: NavBarTheme(iconColor: Colors.blue)
),

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