这段代码是一个用于创建一个(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
关键字引用的是函数的调用者。