Was ist der Unterschied zwischen primaryColor und primarySwatch in Flutter?

73

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.

flutter Toni Joe
quelle

Antworten:

102

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

Rémi Rousselet
quelle
1
Was sind die anderen Farben?
Toni Joe
6
Weitere Infos hier material.io/guidelines/style/color.html#color-color-palette
Rémi Rousselet
1
Danke, ich weiß es zu schätzen
Toni Joe
2
@jaumard Du kannst nicht. primarySwatchist nur eine Verknüpfung zum Festlegen der anderen Eigenschaften. Wenn Sie benutzerdefinierte Eigenschaften benötigen, müssen Sie dem Thema Felder hinzufügen.
Rémi Rousselet
1
Ja. Wenn Sie nur festlegen PrimaryColor, können Sie in seltsame Fälle geraten, in denen einige Widgets diese Farbe nicht verwenden, weil sie ein anderes ThemeFeld verwenden.
Rémi Rousselet
4

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):

Lichtthemen

// 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])

Dunkle Themen

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).

Alle Themen (hell oder dunkel)

// 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…

JPC
quelle
0

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
Tom Pang
quelle