Flutter - 如何根据按钮是否在应用栏或主屏幕上，为平面按钮设置不同颜色的文本样式

7 浏览
0 Comments

Flutter - 如何根据按钮是否在应用栏或主屏幕上，为平面按钮设置不同颜色的文本样式

在我的styles.dart中，我有以下主题设置：

final ThemeData purpleTheme = ThemeData(

brightness: Brightness.light,

primaryColor: PURPLE,

buttonColor: GREEN,

fontFamily: FontNameDefault,

buttonTheme: ButtonThemeData(

textTheme: ButtonTextTheme.primary, // TODO: 这会导致扁平按钮显示为蓝色而不是紫色

buttonColor: GREEN,

height: 45),

appBarTheme: AppBarTheme(

textTheme: TextTheme(title: AppBarTextStyle, button: AppBarTextStyle),

iconTheme: new IconThemeData(color: Colors.white),

brightness: Brightness.dark,

color: PURPLE,

),

textTheme: TextTheme(

title: TitleTextStyle,

body1: Body1TextStyle,

subtitle: SubtitleTextStyle));

根据上述主题设置，buttonTheme的textTheme是ButtonTextTheme.primary。出于某种原因，主要颜色似乎是蓝色，即使在我的样式中没有使用蓝色。当我添加以下代码：

colorScheme: ColorScheme.light().copyWith(primary: PURPLE)

到样式中，主要颜色变为紫色。然而，我希望紫色appbar中的扁平按钮使用白色文本，而白色屏幕中的扁平按钮使用紫色文本。我该如何将这个编码到ThemeData中？

0

1 答案

0 Comments

问题的原因是需要根据父部件的颜色来为不同的组件（例如按钮/文本/自定义部件）设置不同的颜色样式。解决方法是定义一个包含所有颜色变种的主要颜色样本，然后定义一个包含Material规范中的12种颜色的ColorScheme对象。最后，在MaterialApp的主题数据中使用这些定义的值。

以下是解决问题的步骤：

步骤1：定义主要颜色样本

步骤2：定义ColorScheme对象

步骤3：在MaterialApp的主题数据中使用上述定义的值

最后提供了一个示例代码，可以在其中使用这些颜色样式设置不同的文本颜色。

文章通过简洁明了的语言和清晰的步骤，向读者介绍了问题的原因和解决方法，并提供了一个示例代码供读者参考。

0