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

Question

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

我考虑过的一些选项：

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

据我所知，您希望您的自定义Text类能做与普通Text小部件完全相同的事情，但有不同的设计。如果真的是这样的话，我建议您更改项目的主题数据。MaterialApp小部件采用主题参数，因此您可以在其中设置TextTheme、CardTheme、IconButtonTheme等的样式。这将防止任何命名冲突，节省大量代码，并使其易于调整。

像TextTheme这样的东西允许不同类型的样式，如标题、正文等，如这里所述。

Answer 2

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

2. 你可以使用一种巧妙的方法，在我的情况下，我使用了一个故意错误的听写命名。例如，您可以命名为"Cart"而不是"Card"，也可以命名为tekst而不是"Text"。