這段代碼是一個用于創建一個(GradeTag)組件的類。這個組件可以根據輸入的年級和顏色創建一個具有不同顏色和百分比顯示的標簽。
實現原理:
- 使用
GradeTag.origin
構造函數來創建一個包含默認顏色和百分比的字符串。這個構造函數使用了assert
來確保輸入的年級在特定的集合中('SSR', 'SR', 'S', '普通')。 - 使用
GradeTag
工廠方法來創建不同級別的GradeTag。通過傳入不同的顏色參數,可以實現不同級別的標簽具有不同的顏色。 - 在
build
方法中,使用Row
組件來創建標簽的布局。通過設置Container
的邊框圓角半徑為6.0,可以實現標簽具有圓角邊框。 - 使用
Text
組件來顯示年級和百分比。通過設置字體樣式和顏色,可以實現不同的字體樣式和顏色顯示。
用途:
這個組件可以用于展示不同級別的成績標簽,例如SSR(高級)、SR(中級)和S(初級)等。同時,可以通過傳入不同的顏色參數來定制標簽的顏色。
注意事項:
- 確保在調用
GradeTag.origin
構造函數時,傳入的年級在特定的集合中。否則,將會拋出異常。 - 在使用
GradeTag
工廠方法時,可以傳入Key
和Color
參數,但不是必需的。如果未傳入,將使用默認值。 - 在
build
方法中,使用了const
關鍵字來定義EdgeInsets和BorderRadius,這意味著這些值在組件加載時只計算一次,從而提高性能。 - 使用
if
條件語句來判斷是否顯示百分比。這樣可以控制只有當百分比參數不為空時才顯示百分比。
class GradeTag extends StatelessWidget {final String grade;final Color? color;final String? num;const GradeTag.origin(this.grade,{super.key, this.color, this.num = ''}): assert(grade == 'SSR' || grade == 'SR' || grade == 'S' || grade == '普通');factory GradeTag(String grade,{Key? key, Color color = Colors.grey, String number = ''}) {switch (grade) {case 'SSR':return GradeTag.origin(grade, color: Colors.red, num: number);case 'SR':return GradeTag.origin(grade, color: Colors.orange, num: number);case 'S':return GradeTag.origin(grade, color: Colors.orange, num: number);case '普通':return GradeTag.origin(grade, color: Colors.grey, num: number);default:return GradeTag.origin(grade, color: color, num: number);}}@overrideWidget build(BuildContext context) {return Row(children: [Container(padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 6),decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(6.0)),child: Text(grade,style: const TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0,color: Colors.white),),),if (num != '')Padding(padding: const EdgeInsets.only(left: 8.0),child: Text('$num%'),)],);}
}
構造函數和工廠方法是兩種不同的對象創建模式,在面向對象編程中廣泛使用,它們之間有以下異同:
相同之處:
- 目的:兩者都用于創建對象實例。
不同之處:
構造函數(Constructor)
- 定義:構造函數是一種特殊的方法,與類關聯,當通過?
new
?關鍵字創建類的新實例時自動調用。 - 特點:
- 名稱與類名相同。
- 構造函數可以有參數,用來初始化對象的狀態。
- JavaScript 中構造函數通常首字母大寫,這是一種約定俗成的做法,便于區分普通函數。
- 使用?
new
?關鍵字調用時,會創建一個新的對象,并將該對象的上下文(即?this
)綁定到新創建的對象上。
工廠方法(Factory Method)
- 定義:工廠方法是一種設計模式,它是一種用于創建對象的接口,讓子類決定實例化哪一個類。這里的解釋主要針對廣義上的工廠模式,包括簡單工廠、工廠方法模式、抽象工廠模式等。
- 特點:
- 是一個獨立的函數或類方法,不局限于類內部。
- 根據傳入的參數或其他邏輯,動態決定創建哪種類型的對象。
- 工廠方法可以隱藏對象的具體創建過程,提供了更大的靈活性,可以返回父類引用指向子類對象,實現多態。
- 在JavaScript中,工廠函數通常不會被
new
關鍵字調用,而是直接調用函數并返回新創建的對象。 - 工廠函數不會自動調用,需要手動調用
具體到JavaScript中:
-
構造函數舉例:
function Animal(type) {this.type = type; } var cat = new Animal('cat');
-
工廠函數舉例:
function createAnimal(type) {let animal;switch (type) {case 'cat':animal = Object.create(Cat.prototype);animal.initialize(); // 初始化Cat對象break;case 'dog':animal = new Dog(); // 或者直接創建Dog對象break;default:animal = null;}return animal; } var myCat = createAnimal('cat');
總結來說,構造函數是類的一部分,負責初始化類的實例,而工廠方法是一種更靈活的設計模式,但與構造函數不同,它不返回一個新對象,而是返回一個已經存在的對象。工廠函數不會自動調用,需要手動調用。允許你根據輸入數據或環境條件創建不同類型的對象,它并不強制與類結構直接綁定。在JavaScript中,有時工廠函數也被用來模擬類似構造函數的行為,特別是當需要控制是否總是返回新對象,或者避免不小心忘記使用new
關鍵字時。在構造函數中,this
關鍵字引用當前創建的對象;在工廠函數中,this
關鍵字引用的是函數的調用者。