名稱與 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。