dart 在Flutter中设置主题类的更好方法

现在，为了设置各种页面的颜色主题和方案，我创建了几个类来保存所有数据。
这些类工作得很好，但是因为我必须在我的第一个抽象类中声明所有可能的颜色，所以我的所有主题都必须设置所有的颜色，即使那个特定的主题没有使用颜色。
这是成为一个头痛的一些主题有一个关闭的颜色，这迫使我们设置为所有其他主题的空白，你可以看到我的设置在这里：

abstract class MyColorScheme {
  static const MyColorScheme Theme1 = Theme1();
  static const MyColorScheme Theme2 = Theme2();
  static const MyColorScheme Theme3 = Theme3();
  static const MyColorScheme Theme4 = Theme4();
  static const MyColorScheme Theme5 = Theme5();
  static const MyColorScheme Theme6 = Theme6();
  static const MyColorScheme Theme7 = Theme7();

  const MyColorScheme();

  Color color1({required brightness});
  Color get color2;
  Color get color3;
  Color get color4;
  Color get color5;

  IconThemeData get icon1;
  IconThemeData get icon2;

  TextStyle get text1;
  TextStyle get text2;
  TextStyle get text3;
  TextStyle get text4;
  TextStyle get text5;
}

class Theme1 extends MyColorScheme {
  const Theme1() : super();

  @override
  Color color1({brightness}) {
    return (brightness == Brightness.light) ? Colors.red : Colors.blue;
  }

  @override
  Color get color2 => Colors.red;

  @override
  Color get color3 => Colors.red;

  @override
  Color get color4 => Colors.red;

   ...  ///Every one of the above things from the abstract class has to be listed here, even though I don't use any of them
}

有谁能想到一种方法来修改它，这样我就不需要预先声明每一种可能的颜色，而只需要声明在特定示例中需要使用的颜色？

您可以将MyColorScheme中的所有getter更改为final属性，并接受这些属性作为构造函数中的可选命名参数。
为了使参数可选，您可以使属性为空或提供默认值。
我在下面使用默认值实现了它。

Color _color1Default({required Brightness brightness}) => Colors.transparent;

abstract class MyColorScheme {
  static const MyColorScheme theme1 = Theme1();
  static const MyColorScheme theme2 = Theme2();
  static const MyColorScheme theme3 = Theme3();
  static const MyColorScheme theme4 = Theme4();
  static const MyColorScheme theme5 = Theme5();
  static const MyColorScheme theme6 = Theme6();
  static const MyColorScheme theme7 = Theme7();

  const MyColorScheme({
    this.color1 = _color1Default,
    this.color2 = Colors.transparent,
    this.color3 = Colors.transparent,
    this.color4 = Colors.transparent,
    this.color5 = Colors.transparent,
    this.icon1 = const IconThemeData(),
    this.icon2 = const IconThemeData(),
    this.text1 = const TextStyle(),
    this.text2 = const TextStyle(),
    this.text3 = const TextStyle(),
    this.text4 = const TextStyle(),
    this.text5 = const TextStyle(),
  });

  final Color Function({required Brightness brightness}) color1;
  final Color color2;
  final Color color3;
  final Color color4;
  final Color color5;

  final IconThemeData icon1;
  final IconThemeData icon2;

  final TextStyle text1;
  final TextStyle text2;
  final TextStyle text3;
  final TextStyle text4;
  final TextStyle text5;
}

然后，在您的各个主题类中，您可以只将所需的值传递给超级构造函数。

class Theme1 extends MyColorScheme {
  static Color _color1({required Brightness brightness}) {
    return (brightness == Brightness.light) ? Colors.red : Colors.blue;
  }

  const Theme1()
      : super(
          color1: _color1,
          color2: Colors.red,
          color3: Colors.red,
          color4: Colors.red,
        );
}

此外，如果不将MyColorScheme定义为abstract，则可以通过直接创建MyColorScheme的示例（而不是创建子类）来稍微缩短代码。

Color _color1({required Brightness brightness}) {
  return (brightness == Brightness.light) ? Colors.red : Colors.blue;
}

const myTheme1 = MyColorScheme(
  color1: _color1,
  color2: Colors.red,
  color3: Colors.red,
  color4: Colors.red,
);

编辑：另一种方法是更新你的MyColorScheme，使每个get方法都有默认的实现。如果函数在基类中有默认的实现，你就不需要重写它们了。

abstract class MyColorScheme {
  static const MyColorScheme theme1 = Theme1();
  static const MyColorScheme theme2 = Theme2();
  static const MyColorScheme theme3 = Theme3();
  static const MyColorScheme theme4 = Theme4();
  static const MyColorScheme theme5 = Theme5();
  static const MyColorScheme theme6 = Theme6();
  static const MyColorScheme theme7 = Theme7();

  const MyColorScheme();

  Color color1({required brightness}) => Colors.transparent;
  Color get color2 => Colors.transparent;
  Color get color3 => Colors.transparent;
  Color get color4 => Colors.transparent;
  Color get color5 => Colors.transparent;

  IconThemeData get icon1 => const IconThemeData();
  IconThemeData get icon2 => const IconThemeData();

  TextStyle get text1 => const TextStyle();
  TextStyle get text2 => const TextStyle();
  TextStyle get text3 => const TextStyle();
  TextStyle get text4 => const TextStyle();
  TextStyle get text5 => const TextStyle();
}

然后Theme1可以通过只重写所需的方法来实现。

class Theme1 extends MyColorScheme {
  const Theme1();
  
  @override
  Color color1({brightness}) {
    return (brightness == Brightness.light) ? Colors.red : Colors.blue;
  }

  @override
  Color get color2 => Colors.red;

  @override
  Color get color3 => Colors.red;

  @override
  Color get color4 => Colors.red;
}

dart 在Flutter中设置主题类的更好方法

1条答案

相关问题

热门标签

最新问答