名称与 Flutter 中的自定义小部件冲突

Question

在 Flutter 中制作与材料 package 导出的小部件不冲突的自定义小部件的最佳方法是什么？ 具体来说：我正在尝试制作一个基于atomic design的设计系统。 所以，假设我想要自己的Text和Card小部件。 我不能将它们命名为Text或Card ，因为它们都是由材料 package 导出的。

我考虑过的一些选项：

1. 创建一个ui库并使用as导入

// components/atoms/Text.dart
import "package:flutter/material.dart" hide Text;
import "package:flutter/material.dart" as material show Text;

class Text extends StatelessWidget {
  Text(String content);

  Widget build(BuildContext context) {
    // Imagine some more complicated styling specific to my design system
    return material.Text(content);
  }
}

// components/ui.dart
library ui

export "package:my_app/components/atoms/Text";

// screens/HomeScreen.dart

import "package:flutter/material.dart";
import "package:my_app/components/ui" as ui;

class HomeScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    // Example usage
    return ui.Text(content);
  }
}

这感觉不太好......首先，我需要记住在导入ui库时包含as其次，在我的Text实现中hide和show类有点烦人。

2. 只是hide冲突的类

// screens/HomeScreen.dart

import "package:flutter/material.dart" hide Text;
import "package:my_app/components/Text";

class HomeScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    // Example usage
    return Text(content);
  }
}

与选项 (1) 类似，我不想记住hide所有与我的自定义小部件冲突的类。

3. 只需使用不同的名称

也许AppText或ThemeText或UIText或AtomText ？ 这也感觉不太好，尤其是对于像IconButton这样的其他一些小部件。

有没有围绕这个的约定，或者一些体面的解决方案？ 我还没有看到任何自定义 UI 库，但这对于希望跨应用程序重用小部件并保持一致风格的团队非常有用。

Answer 1

据我所知，您希望您的自定义文本 class 与普通文本小部件执行完全相同的操作，但设计不同。 如果确实如此，我建议您更改项目的 ThemeData。 MaterialApp小部件采用主题参数，因此您可以在其中设置 TextTheme、CardTheme、IconButtonTheme 等样式。 这将防止任何命名冲突，为您节省大量编码，并使其易于调整。

诸如 TextTheme 之类的东西允许不同类型的 styles，例如标题、正文等，如此 处所述。

Answer 2

1. 您可以在小部件的开头添加“我的”，例如，用“MyText”代替“Text”，用“MyCard”代替“Card”。

2. 您可以使用一种棘手的方式，在我的情况下，我故意使用错误的听写来命名。 例如，您可以将“Card”命名为“Cart”，或者将“Text”命名为 tekst。