1

我正在编写一个颤振应用程序，我正在尝试为浅色和深色主题定义我自己的主题。使用 android studio 进行编码并使用随附的常规 android 模拟器对其进行测试。

我注意到，当我在深色主题中更改图标颜色时，它可以工作并看到所需颜色的图标，当模拟器设置为浅色主题时，图标的颜色不会改变。

这是我的黑暗主题代码，确实有效：

import 'package:flutter/material.dart';

class DarkTheme {
  DarkTheme._();

  static const Color _iconColor = Colors.red;
  static const Color _darkPrimaryColor = Colors.black;
  static const Color _darkSecondaryColor = Colors.white;
  static const Color _darkOnPrimaryColor = Colors.white;

  static final ThemeData darkTheme = ThemeData(
    scaffoldBackgroundColor: _darkPrimaryColor,
    appBarTheme: const AppBarTheme(
        color: _darkPrimaryColor,
        iconTheme: IconThemeData(
          color: _darkOnPrimaryColor,
        )
    ),
    colorScheme: const ColorScheme.dark(
      primary: _darkPrimaryColor,
      secondary: _darkSecondaryColor,
      onPrimary: _darkOnPrimaryColor,
    ),
    iconTheme: const IconThemeData(
      color: _iconColor,
    ),
    textTheme: _darkTextTheme,
  );
  static const TextTheme _darkTextTheme = TextTheme(
    headline1: _darkScreenHeadingTextStyle,
    bodyText1: _darkScreenTaskNameStyle,
    bodyText2: _darkScreenTaskDurationStyle,
  );
  static const TextStyle _darkScreenHeadingTextStyle = TextStyle(
    fontSize: 48.0,
    color: _darkOnPrimaryColor,
  );
  static const TextStyle _darkScreenTaskNameStyle = TextStyle(
    fontSize: 20.0,
    color: _darkOnPrimaryColor,
  );
  static const TextStyle _darkScreenTaskDurationStyle = TextStyle(
    fontSize: 16.0,
    color: _darkOnPrimaryColor,
  );
}

正如您在此处看到的，我将图标颜色设置为红色，当我在暗模式下运行应用程序时，图标为红色。

深色主题中的红色图标

这是轻主题的代码：

import 'package:flutter/material.dart';

class PinkTheme {
  PinkTheme._();

  static const Color _iconColor = Colors.yellow;
  static const Color _lightPrimaryColor = Colors.pinkAccent;
  static const Color _lightPrimaryVariantColor = Colors.blue;
  static const Color _lightSecondaryColor = Colors.green;
  static const Color _lightOnPrimaryColor = Colors.black;

  static final ThemeData lightTheme = ThemeData(
    scaffoldBackgroundColor: _lightPrimaryVariantColor,
    appBarTheme: const AppBarTheme(
       color: _lightPrimaryVariantColor,
      iconTheme: IconThemeData(
        color: _lightOnPrimaryColor,
      )
    ),
      colorScheme: const ColorScheme.light(
          primary: _lightPrimaryColor,
          primaryVariant: _lightPrimaryVariantColor,
          secondary: _lightSecondaryColor,
          onPrimary: _lightOnPrimaryColor,
      ),
      iconTheme: const IconThemeData(
        color: _iconColor,
  ),
      textTheme: _lightTextTheme,
  );
static const TextTheme _lightTextTheme = TextTheme(
  headline1: _lightScreenHeadingTextStyle,
  bodyText1: _lightScreenTaskNameStyle,
  bodyText2: _lightScreenTaskDurationStyle,
);
  static const TextStyle _lightScreenHeadingTextStyle = TextStyle(
    fontSize: 48.0,
    color: _lightOnPrimaryColor,
  );
  static const TextStyle _lightScreenTaskNameStyle = TextStyle(
    fontSize: 20.0,
    color: _lightOnPrimaryColor,
  );
  static const TextStyle _lightScreenTaskDurationStyle = TextStyle(
    fontSize: 16.0,
    color: _lightOnPrimaryColor,
  );
}

当我将模拟器设置为浅色主题时，我看到的图标不是黄色的，而是灰色的。

浅色主题中灰色而不是黄色的图标

这就是我在我的应用程序中使用主题的方式：

return MaterialApp(
          title: 'Test App',
          theme: PinkTheme.lightTheme,
          darkTheme: DarkTheme.darkTheme,
          themeMode: ThemeMode.system,
          ...

任何想法如何解决它？

谢谢你

4

2 回答 2

1

用于它的默认显示的ListTile对象ListTileTheme，您需要ListTileTheme为您的 main设置ThemeData如下：

return MaterialApp(
  title: '...',
  theme: ThemeData(
    listTileTheme: const ListTileThemeData(
      iconColor: Colors.red,
    ),
    primarySwatch: ...,

或者，您也可以ListTileTheme通过将小部件设置为其child参数来直接在任何需要的地方使用，您可以Drawer使用以下包装ListTileTheme：

return ListTileTheme(
  iconColor: Colors.red,
  child: Drawer(
    child: Column(
      children: [
        ...
于 2022-01-30T11:31:16.700 回答
1 
ThemeData(
        listTileTheme: ListTileThemeData(
          iconColor: Colors.red,
        ),

一个继承的小部件，用于定义此小部件子树中 ListTiles 的颜色和样式参数。

此处指定的值用于未给定显式非空值的 ListTile 属性。

于 2022-01-30T11:40:40.920 回答