ColorScheme Flutter 中 Primary 和 onPrimary 属性有什么区别

Question

在定义ThemeDataFlutter 应用程序时，我们可以定义colorScheme属性。该属性具有background& onBackground、primary& onPrimary、secondary&等内部属性onSecondary。此外，所有这些属性都设置为required。

  static final ThemeData lightTheme = ThemeData(
    colorScheme: ColorScheme(
      background: appBackgroundColor,
      brightness: Brightness.light,
      error: Colors.white,
      onBackground: primaryColor,
      onError: null,
      onPrimary: null,
      onSecondary: null,
      onSurface: null,
      primary: null,
      secondary: secondaryColor,
      surface: null,
    ),
  );

我尝试参考Flutter 的文档，但不太明白它们之间的区别。

Answer 1

“开启”颜色\n应用表面使用调色板中特定类别的颜色，例如原色。每当文本或图标等元素出现在这些表面前面时，这些元素应使用设计得与它们后面的颜色相比清晰易读的颜色。

\n

此类颜色称为 \xe2\x80\x9con\xe2\x80\x9d 颜色，指的是它们为使用以下颜色的表面 \xe2\x80\x9con\xe2\x80\x9d 顶部出现的元素着色：主要颜色、次要颜色、表面颜色、背景颜色或错误颜色。当一种颜色出现在原色的顶部时，它被称为\xe2\x80\x9con 原色。\xe2\x80\x9d 它们使用带有前缀 \xe2\x80\x9con.\xe2\x80\x9d 的原始颜色类别（例如原色）

\n

\xe2\x80\x9cOn\xe2\x80\x9d 颜色主要应用于文本、图像和笔划。有时，它们被应用于表面。

\n

\xe2\x80\x9con\xe2\x80\x9d 颜色的默认值为 #FFFFFF 和 #000000。

\n

\n

检查这个：\n颜色系统

\n

Answer 2

许多颜色都有匹配的“on”颜色，用于在匹配颜色之上绘制内容。例如，如果某些东西使用primary作为背景颜色，onPrimary将用于在其上绘制文本和图标。因此，“开启”颜色与其匹配颜色的对比度应至少为 4.5:1，以便可读。

从https://api.flutter.dev/flutter/material/ColorScheme-class.html得到这个