flutter组件封装技巧

简介: 工厂函数不会自动调用,需要手动调用

这段代码是一个用于创建一个(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);
}
}

@override
Widget 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中:

相关文章
|
4月前
Flutter 组件(二)文本 与 输入框组件
Flutter 组件(二)文本 与 输入框组件
313 0
|
2天前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
143 58
|
18天前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
|
2天前
|
开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
|
2天前
Stream 组件在 Flutter 中的具体使用方法是什么?
Stream 组件在 Flutter 中的具体使用方法是什么?
|
23天前
|
容器
Flutter基本组件Text使用
Flutter基本组件Text使用
38 12
|
14天前
|
Dart
Flutter|常用数据通信组件
在做需求时经常会遇到组件间通信,本篇汇总了几种常用的通信方式
14 0
|
2月前
|
Dart 开发者 UED
flutter 非常用组件整理 第三篇
本文是非常用组件的第三讲,介绍了一些不为人知但却能大幅提升Flutter应用UI效果和功能的高级组件,包括FadeInImage、GridPaper、Hero等,为开发者带来更丰富的UI设计可能。
flutter 非常用组件整理 第三篇
|
2月前
|
Dart 数据安全/隐私保护 开发者
flutter 非常用组件整理 第二篇
本文是Flutter非常用组件第二篇,从开发者的视角出发,精选并深入剖析了AboutDialog、AnimatedGrid、Badge等鲜为人知却功能强大的隐藏组件,为读者提供了一份全面的Flutter UI组件使用指南。无论您是初学者还是有经验的开发者,相信本文都能为您的Flutter项目注入新的活力,助力打造出色的应用界面。
flutter 非常用组件整理 第二篇
|
1月前
|
开发工具
解决Flutter中ThemeData.primaryColor在AppBar等组件中不生效
解决Flutter中ThemeData.primaryColor在AppBar等组件中不生效
42 1