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中:

相关文章
|
2月前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
167 58
|
2月前
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
100 49
|
2月前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
164 60
|
14天前
|
存储 开发框架 开发者
flutter:代码存储&基本组件 (五)
本文档介绍了Flutter中的一些基本组件和代码示例,包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法(如简单使用、登录页面、文本控制器的监听与使用、修饰等),以及如何实现点击空白区域隐藏键盘等功能。通过这些示例,开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。
|
2月前
|
开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
|
14天前
|
开发者
flutter:功能性组件 (八)
本文介绍了Flutter中常用的UI组件和功能,包括进度指示器(线性和圆形)、下拉刷新、选项按钮(单选按钮、复选框、开关)、手势识别(GestureDetector、Ink和InkWell)以及提示和Offstage组件的使用方法和示例代码。这些组件和功能可以帮助开发者快速构建交互丰富的应用程序界面。
|
2月前
Stream 组件在 Flutter 中的具体使用方法是什么?
Stream 组件在 Flutter 中的具体使用方法是什么?
|
2月前
|
容器
Flutter基本组件Text使用
Flutter基本组件Text使用
45 12
|
2月前
|
Dart
Flutter|常用数据通信组件
在做需求时经常会遇到组件间通信,本篇汇总了几种常用的通信方式
27 1
|
4月前
|
Dart 开发者 UED
flutter 非常用组件整理 第三篇
本文是非常用组件的第三讲,介绍了一些不为人知但却能大幅提升Flutter应用UI效果和功能的高级组件,包括FadeInImage、GridPaper、Hero等,为开发者带来更丰富的UI设计可能。
flutter 非常用组件整理 第三篇