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

KXMing2023-10-30 18:41

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

如果您是主题方面的新手，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 。

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

scss 复制代码 
// Light Colors
ColorStyles lightColors = LightThemeColors();

// Dark Colors
ColorStyles darkColors = DarkThemeColors();

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

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

less 复制代码 
...
// 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 配置中添加新主题。下面是一个示例。

ini 复制代码 
final appThemes = [

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

  ThemeConfig.light(),

  ThemeConfig.dark(),
];

主题颜色

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

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

ini 复制代码 
// 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;
}

在组件中使用颜色

less 复制代码 
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 文件

scss 复制代码 
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 支持即时切换主题的功能。

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

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

less 复制代码 
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 文件中定义。

ini 复制代码 
// App Themes
final appThemes = [

  ThemeConfig.light(),

  ThemeConfig.dark(),
];

字体

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

final TextStyle appThemeFont = GoogleFonts.lato();

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

ini 复制代码 
// 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) 设置文本的最大行数
相关推荐
LuciferHuang4 小时前
震惊！三万star开源项目竟有致命Bug？
前端·javascript·debug
GISer_Jing4 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20154 小时前
前端工程化：Webpack从入门到精通
前端·webpack·node.js
姑苏洛言5 小时前
编写产品需求文档：黄历日历小程序
前端·javascript·后端
知识分享小能手5 小时前
Vue3 学习教程，从入门到精通，使用 VSCode 开发 Vue3 的详细指南（3）
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言5 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友6 小时前
🤔什么时候用BFF架构？
前端·javascript·后端
知识分享小能手7 小时前
Bootstrap 5学习教程，从入门到精通，Bootstrap 5 表单验证语法知识点及案例代码（34）
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿7 小时前
前端计算机视觉：使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04RAL-2025 | 触觉助力无人机空中探索！基于柔顺机器人手指的无人机触觉导航05Java学习第十五部分——MyBatis06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07免费领50刀！AnyRouter一键解锁Claude最强编程模型08基于odoo17的设计模式详解---单例模式09DeepSeek各版本说明与优缺点分析10vite 插件