In Flutter kann ein Thema mithilfe der ThemeData-Klasse auf die App angewendet werden. Aber es gibt zwei Eigenschaften dieser Klasse, die mich verwirren: primaryColorund primarySwatch. Was ist der Unterschied zwischen diesen beiden Eigenschaften und wann die eine oder andere verwendet werden soll? Vielen Dank.
Antworten:
primarySwatchist nicht ein Color. Es istMaterialColor . Das heißt, es sind die verschiedenen Farbtöne, die eine Material-App verwendet.
primaryColorist eine dieser Farben. Um genau zu sein, primaryColorist normalerweise gleich primarySwatch[500].
Es ist normalerweise besser, ein primarySwatchanstelle von zu definieren primaryColor. Weil einige Materialkomponenten primaryColorfür Dinge wie Schatten, Rand, ... einen anderen Farbton verwenden können
primarySwatchist nur eine Verknüpfung zum Festlegen der anderen Eigenschaften. Wenn Sie benutzerdefinierte Eigenschaften benötigen, müssen Sie dem Thema Felder hinzufügen.
PrimaryColor, können Sie in seltsame Fälle geraten, in denen einige Widgets diese Farbe nicht verwenden, weil sie ein anderes ThemeFeld verwenden.
Folgendes stammt aus meiner Durchsicht von theme_data.dart:
primarySwatchstandardmäßig auf Colors.bluedie folgenden Felder und Sätze (einschließlich primaryColor) , um verschiedene Farbtöne des MaterialColorEingangs je nachdem , ob das Motiv brightnesshell oder dunkel ist (Standard ist Licht):
// The default shade for the color is used
primaryColor = primarySwatch; // [500] for normal colors and [200] for accent colors
primaryColorLight = primarySwatch[100];
primaryColorDark = primarySwatch[700];
// This can be overridden by setting accentColor (below) manually
toggleableActiveColor = primarySwatch[600];
accentColor = primarySwatch[500];
secondaryHeaderColor = primarySwatch[50];
textSelectionColor = primarySwatch[200];
textSelectionHandleColor = primarySwatch[300]
backgroundColor = primarySwatch[200];
* buttonColor ist auf die Standardeinstellung eingestellt (grau [300])
buttonColor = primarySwatch[600];
* Die verbleibenden Felder, die oben für helle Themen aufgeführt sind, werden auf ihre dunklen Standardeinstellungen gesetzt (verschiedene Schattierungen von tealAccent, grau oder schwarz).
// Brightness.dark/light is estimated based on the default shade for the color
// This also sets the bool primaryIsDark
primaryColorBrightness = estimateBrightnessForColor(primarySwatch);
// This generates the modern simplified set of theme colors flutter recommends
// using when theming Widgets based on the theme. Set it manually if you need
// more control over individual colors
colorScheme = ColorScheme.fromSwatch(
primarySwatch: primarySwatch, // as above
primaryColorDark: primaryColorDark, // as above
accentColor: accentColor, // as above
cardColor: cardColor, // default based on theme brightness, can be set manually
backgroundColor: backgroundColor, // as above
errorColor: errorColor, // default (Colors.red[700]), can be set manually
brightness: brightness, // default (Brightness.light), can be set manually
);
Wie in der akzeptierten Antwort erwähnt, primaryColorkönnen Widgets nur durch die Einstellung eine andere Standardfarbe (verschiedene Blautöne) basierend auf einem der anderen oben genannten Felder auswählen, wenn sie nicht auch einzeln festgelegt werden. Dies primarySwatchist eine praktische Abkürzung für einfache Themen.
Im Allgemeinen ist das Feld colorScheme jedoch gemäß den modernen Konventionen, die Sie verwenden sollten, am wichtigsten Theme.of(context).colorScheme.<Color> (obwohl es möglicherweise noch nicht überall funktioniert, je nachdem, wann Sie dies lesen).
Wenn Sie also mehr Kontrolle über einzelne Themenfarben benötigen, können Sie entweder die in verwendeten Felder ColorScheme.fromSwatchfestlegen oder einfach die primarySwatch(aus Gründen der Abwärtskompatibilität von Flatter-Widgets, die noch nicht migriert wurden) festlegen und die colorSchememanuell für zusätzliche festlegen Steuerung. Siehe auch dieses Dokument für weitere Informationen…
primarySwatch ist MaterialColor .
/// Defines a single color as well a color swatch with ten shades of the color.
///
/// The color's shades are referred to by index. The greater the index, the
/// darker the color. There are 10 valid indices: 50, 100, 200, ..., 900.
/// The value of this color should the same the value of index 500 and [shade500].
/// hex_value1 = 0xFFAAD401; hex_value2 = 0xFFAAD403; ...
MaterialColor myGreen = const MaterialColor(0xFFAAD400,
const {
50 : const Color(hex_value1),
100 : const Color(hex_value2),
200 : const Color(hex_value3),
300 : const Color(hex_value4),
400 : const Color(hex_value5),
500 : const Color(hex_value6),
600 : const Color(hex_value7),
700 : const Color(hex_value8),
800 : const Color(hex_value9),
900 : const Color(hex_value10)});
// use MaterialColor: myGreen.shade100,myGreen.shade500 ...
myGreen.shade50 // Color === 0xFFAAD401