Flutter微框架Nylo（十二）：主题和样式

您可以使用主题来管理应用程序的用户界面风格。通过主题，我们可以改变文本的字体大小、按钮的显示方式以及应用程序的整体外观。

如果您是主题方面的新手，Flutter 网站上的示例可以帮助您入门。

开箱即用的 Nylo 包括预配置的浅色模式和深色模式主题。

如果设备进入 "浅色/深色 "模式，主题也会更新。

浅色与深色主题

浅色主题 - lib/resources/themes/light_theme.dart

深色主题 - lib/resources/themes/dark_theme.dart

在这些文件中，您将找到预定义的主题数据和主题样式。

创建主题

如果你想为你的应用程序设置多个主题，我们有一个简单的方法。如果你是主题方面的新手，请跟我们学习。

首先，从终端运行以下命令：

dart run nylo_framework:main make:theme bright_theme

注意：将bright_theme替换为新主题的名称。

这会在 /resources/themes/ 目录中创建一个新主题，并在 /resources/themes/styles/ 目录中创建一个主题颜色文件。

您可以在 /resources/themes/styles/bright_theme_colors.dart 文件中修改新主题的颜色。

准备好使用新主题后，请转到 config/theme.dart 。

接下来，在“主题颜色”部分下方添加颜色，如以下示例所示。

// Light Colors
ColorStyles lightColors = LightThemeColors();

// Dark Colors
ColorStyles darkColors = DarkThemeColors();

// My New Bright Colors 
ColorStyles brightColors = BrightThemeColors();
...

接下来，在 ThemeConfig 类中添加新主题，如以下示例所示。

...
// Preset Themes
class ThemeConfig {

  // LIGHT
  static BaseThemeConfig<ColorStyles> light() => BaseThemeConfig<ColorStyles>(
    id: "default_light_theme",
    description: "Light theme",
    theme: lightTheme(lightColors),
    colors: lightColors,
  );

  // My new theme
  static BaseThemeConfig<ColorStyles> bright() => BaseThemeConfig<ColorStyles>(
   id: "default_bright_theme", // id when switching theme in the app
   description: "Bright theme",
   theme: brightTheme(brightColors),
   colors: brightColors,
  );

最后，在 appThemes 配置中添加新主题。下面是一个示例。

final appThemes = [

  ThemeConfig.bright(), // 第一个将设置为默认主题

  ThemeConfig.light(),

  ThemeConfig.dark(),
];

主题颜色

要管理项目中的主题颜色，请查看 lib/resources/themes/styles 目录。此目录包含 light_theme_colors.dart 和 dark_theme_colors.dart 的样式颜色。

在该文件中，应该有类似下面的内容。

// e.g Light Theme colors
class LightThemeColors implements ColorStyles {
  // general
  Color get background => const Color(0xFFFFFFFF);
  Color get primaryContent => const Color(0xFF000000);
  Color get primaryAccent => const Color(0xFF87c694);

  Color get surfaceBackground => Colors.white;
  Color get surfaceContent => Colors.black;

  // app bar
  Color get appBarBackground => Colors.blue;
  Color get appBarPrimaryContent => Colors.white;

  // buttons
  Color get buttonBackground => Colors.blueAccent;
  Color get buttonPrimaryContent => Colors.white;

  // bottom tab bar
  Color get bottomTabBarBackground => Colors.white;

  // bottom tab bar - icons
  Color get bottomTabBarIconSelected => Colors.blue;
  Color get bottomTabBarIconUnselected => Colors.black54;

  // bottom tab bar - label
  Color get bottomTabBarLabelUnselected => Colors.black45;
  Color get bottomTabBarLabelSelected => Colors.black;
}

在组件中使用颜色

import 'package:flutter_app/config/theme.dart';
...

// gets the light/dark background colour depending on the theme
ThemeColor.get(context).background

// e.g. of using the "ThemeColor" class
Text(
  "Hello World",
  style: TextStyle(
      color:  ThemeColor.get(context).primaryContent // Color - primary content
  ),
),

// or 

Text(
  "Hello World",
  style: TextStyle(
      color:  ThemeConfig.light().colors.primaryContent // Light theme colors - primary content
  ),
),

基本样式

基本样式允许您从代码中的一个区域自定义各种小部件颜色。

Nylo 为您的项目提供了预配置的基本样式，位于 lib/resources/themes/styles/color_styles.dart。

这些样式为 light_theme_colors.dart 和 dart_theme_colors.dart 中的主题颜色提供了接口。

lib/resources/themes/styles/color_styles.dart 文件

abstract class ColorStyles {
  // general
  Color get background;
  Color get primaryContent;
  Color get primaryAccent;

  // app bar
  Color get appBarBackground;
  Color get appBarPrimaryContent;

  // buttons
  Color get buttonBackground;
  Color get buttonPrimaryContent;

  // bottom tab bar
  Color get bottomTabBarBackground;

  // bottom tab bar - icons
  Color get bottomTabBarIconSelected;
  Color get bottomTabBarIconUnselected;

  // bottom tab bar - label
  Color get bottomTabBarLabelUnselected;
  Color get bottomTabBarLabelSelected;
}

您可以在此处添加其他样式，然后在主题中实现颜色。

切换主题

Nylo 支持即时切换主题的功能。

例如，如果用户点击按钮激活 "深色主题"，则需要切换主题。

您可以通过执行以下操作来支持这一点：

import 'package:nylo_framework/theme/helper/ny_theme.dart';
...

TextButton(onPressed: () {

    // set theme to use the "dark theme" 
    NyTheme.set(context, id: "dark_theme");
    setState(() { });
  
  }, child: Text("Dark Theme")
),

// or

TextButton(onPressed: () {

    // set theme to use the "light theme" 
    NyTheme.set(context, id: "light_theme");
    setState(() { });
  
  }, child: Text("Light Theme")
``

定义主题

主题在 config/app_theme.dart 文件中定义。

// App Themes
final appThemes = [

  ThemeConfig.light(),

  ThemeConfig.dark(),
];

字体

在 Nylo 中更新整个应用程序的主要字体非常简单。打开 lib/config/font.dart 文件并更新以下内容。

final TextStyle appThemeFont = GoogleFonts.lato();

我们在版本库中包含了 GoogleFonts 库，因此你只需花很少的精力就能开始使用所有字体。要将字体更新为其他字体，可以执行以下操作：

// OLD
// final TextStyle appThemeFont = GoogleFonts.lato();

// NEW
final TextStyle appThemeFont = GoogleFonts.montserrat();

需要使用自定义字体？查看本指南 - flutter.dev/docs/cookbo…

添加字体后，更改变量，如以下示例所示。

final TextStyle appThemeFont = TextStyle(fontFamily: "ZenTokyoZoo");

设计

config/design.dart 文件用于管理应用的设计元素。

logo 变量用于显示应用的logo。

loader 变量用于显示加载器。Nylo 会在某些辅助方法中使用该变量作为默认加载器部件。

您可以修改 resources/widgets/logo_widget.dart，自定义显示徽标的方式。

文本样式

以下是您可以在 Nylo 中使用的可用文本样式。

规则名称	用法	说明
Display Large	Text("Hello World").displayLarge(context)	大字体
Display Medium	Text("Hello World").displayMedium(context)	中等字体
isplay Small	Text("Hello World").displaySmall(context)	小字体
Heading Large	Text("Hello World").headingLarge(context)
Heading Medium	Text("Hello World").headingMedium(context)
Heading Small	Text("Hello World").headingSmall(context)
Title Large	Text("Hello World").titleLarge(context)
Title Medium	Text("Hello World").titleMedium(context)
Title Small	Text("Hello World").titleSmall(context)
Body Large	Text("Hello World").bodyLarge(context)
Body Medium	Text("Hello World").bodyMedium(context)
Body Small 机身小巧	Text("Hello World").bodySmall(context)
Font Weight Bold	Text("Hello World").fontWeightBold()	将字体粗细应用于组件文本
Font Weight Light	Text("Hello World").fontWeightLight()	将字体粗细应用于组件文本
Set Color	Text("Hello World").setColor(context, (color) => colors.primaryAccent)	设置字体颜色
Align Left	Text("Hello World").alignLeft()	将字体左对齐
Align Right	Text("Hello World").alignRight()	将字体右对齐
Align Center	Text("Hello World").alignCenter()	将字体居中对齐
Set Max Lines	Text("Hello World").setMaxLines(5)	设置文本的最大行数