在 Flutter 中声明样式文件

Question

我想知道在 Flutter 中使用我的所有颜色信息和文本样式实现样式文件的最佳方式是什么。

浏览一些教程，有些似乎使用抽象类，有些则使用函数。导入的方式也不同。

性能/便利性/组织方面的最佳方法是什么？

或者我应该完全避免这样做，而是将所有内容都声明为主题？

• 第一种方法：

  styles.dart 文件导入为

  import 'styles.dart';
  

  style.dart 文件：

  import 'package:flutter/widgets.dart';
  
  abstract class ThemeText {
    static const TextStyle progressHeader = TextStyle(
        fontFamily: 'Montserrat',
        color: ThemeColor.bodyText,
        fontSize: 40,
        height: 0.5,
        fontWeight: FontWeight.w600);
  }
  
  

• 第二种方法：

  utils.dart 文件导入为：

  import './utils.dart' as utils;
  

  utils.dart 内容：

  TextStyle getProgressHeaderStyle() {
    return const TextStyle(
        color: ThemeColor.bodyText,
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.w600,
        fontSize: 40.0,
        height: 0.5);
  }
  

Answer 1

对于导入部分，您可以使用以下之一，它们具有相同的含义：

import 'package:your_project_name/utils.dart';
import './utils.dart';
import 'utils.dart';

这只是约定俗成的问题。

您应该import 'package:your_project_name/utils.dart';习惯于从项目外部对导入的库进行分类。并import 'utils.dart';用于您的内部图书馆。

使用import './utils.dart';对我来说是多余的。似乎它使用 unix 文件路径约定，这./意味着当前目录。

对于as以下行中的关键字：

 import './utils.dart' as utils;

这意味着您要将所有代码分组utils.dart为utils. 因此，无论何时需要使用 中的代码utils.dart，都需要utils在调用其中的函数之前使用。像这样的东西：

utils.getProgressHeaderStyle()

对于styles.dart和utils.dart，

使用抽象类和const变量是在一个组中组织所有相关样式的好方法。在您的以下代码中：

abstract class ThemeText {
  static const TextStyle progressHeader = TextStyle(
      fontFamily: 'Montserrat',
      color: ThemeColor.bodyText,
      fontSize: 40,
      height: 0.5,
      fontWeight: FontWeight.w600);
}

您将样式分组为一组 ThemeText。考虑以下场景：您的文本页眉、正文和页脚需要三种进度样式。因此，您需要将所有这些分组为一组文本。然后您可以执行以下操作：

abstract class ThemeText {
  static const TextStyle progressHeader = TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.black,
      fontSize: 40,
      height: 0.5,
      fontWeight: FontWeight.w600);

  static const TextStyle progressBody = TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.white,
      fontSize: 10,
      height: 0.5,
      fontWeight: FontWeight.w400);

  static const TextStyle progressFooter = TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.black,
      fontSize: 20,
      height: 0.5,
      fontWeight: FontWeight.w600);
}

因此，您现在可以访问三个变量：

ThemeText.progressHeader;
ThemeText.progressBody;
ThemeText.progressFooter;

现在所有文本样式属性都集中在一处！

现在，如何使用utils.dart来组织您的风格？你utils.dart的如下：

TextStyle getProgressHeaderStyle() {
  return const TextStyle(
      color: ThemeColor.bodyText,
      fontFamily: 'Montserrat',
      fontWeight: FontWeight.w600,
      fontSize: 40.0,
      height: 0.5);
}

添加正文和页脚将使它成为这样：

TextStyle getProgressHeaderStyle() {
      return const TextStyle(
          color: ThemeColor.bodyText,
          fontFamily: 'Montserrat',
          fontWeight: FontWeight.w600,
          fontSize: 40.0,
          height: 0.5);
    }

TextStyle getProgressBodyStyle() {
  return const TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.white,
      fontSize: 10,
      height: 0.5,
      fontWeight: FontWeight.w400);
}

TextStyle getProgressFooterStyle() {
  return const TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.black,
      fontSize: 20,
      height: 0.5,
      fontWeight: FontWeight.w600);
}

您可以在其中访问所有功能，如下所示：

utils.getProgressHeaderStyle();
utils.getProgressBodyStyle();
utils.getProgressFooterStyle();

您可以看到您现在正在访问一组方法而不是样式属性。

每当您调用函数时，您的性能也会受到很小的影响（尽管可以忽略不计）。