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 中的应用场景有哪些?
173 58
|
2月前
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
102 49
|
11天前
|
存储 缓存 Dart
Flutter&鸿蒙next 封装 Dio 网络请求详解:登录身份验证与免登录缓存
本文详细介绍了如何在 Flutter 中使用 Dio 封装网络请求,实现用户登录身份验证及免登录缓存功能。首先在 `pubspec.yaml` 中添加 Dio 和 `shared_preferences` 依赖,然后创建 `NetworkService` 类封装 Dio 的功能,包括请求拦截、响应拦截、Token 存储和登录请求。最后,通过一个登录界面示例展示了如何在实际应用中使用 `NetworkService` 进行身份验证。希望本文能帮助你在 Flutter 中更好地处理网络请求和用户认证。
128 1
|
11天前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
110 1
|
11天前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
62 1
|
11天前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先,通过`flutter create`命令创建项目;接着,在`lib`目录下封装一个自定义输入框组件`CustomInput`;然后,在主应用文件`main.dart`中使用该输入框组件,实现简单的UI布局和功能;最后,通过`flutter run`启动应用。本文还提供了后续扩展建议,如状态管理、网络请求和UI优化。
89 1
|
12天前
|
存储 缓存 JavaScript
Flutter 学习之封装 WebView
【10月更文挑战第24天】通过以上的探讨,我们可以看出,在 Flutter 中封装 WebView 是非常有必要的,它可以提高代码的复用性、增强可维护性、提供统一接口。在实际应用中,我们需要根据具体的需求和场景,选择合适的封装方法和技术,以实现更好的效果。
|
14天前
|
Dart UED
Flutter用户交互组件
Flutter用户交互组件
17 2
|
2月前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
168 60
|
29天前
|
存储 开发框架 开发者
flutter:代码存储&基本组件 (五)
本文档介绍了Flutter中的一些基本组件和代码示例,包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法(如简单使用、登录页面、文本控制器的监听与使用、修饰等),以及如何实现点击空白区域隐藏键盘等功能。通过这些示例,开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。