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

相关文章
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
484 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
326 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
301 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
8月前
|
索引
【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
在 Flutter 开发中,AzListView 是实现字母索引分类列表的理想选择。它支持 A-Z 快速跳转、悬浮分组标题、自定义 UI 和高效性能,适用于通讯录、城市选择等场景。本文将详细解析 AzListView 的核心参数和实战示例,助你轻松实现流畅的索引列表。
332 7
|
12月前
|
存储 缓存 JavaScript
Flutter 学习之封装 WebView
【10月更文挑战第24天】通过以上的探讨,我们可以看出,在 Flutter 中封装 WebView 是非常有必要的,它可以提高代码的复用性、增强可维护性、提供统一接口。在实际应用中,我们需要根据具体的需求和场景,选择合适的封装方法和技术,以实现更好的效果。
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
400 58
|
11月前
|
XML JSON 前端开发
一文带你了解 Flutter dio封装
一文带你了解 Flutter dio封装
1543 1
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
188 49
|
12月前
|
存储 缓存 Dart
Flutter&鸿蒙next 封装 Dio 网络请求详解:登录身份验证与免登录缓存
本文详细介绍了如何在 Flutter 中使用 Dio 封装网络请求,实现用户登录身份验证及免登录缓存功能。首先在 `pubspec.yaml` 中添加 Dio 和 `shared_preferences` 依赖,然后创建 `NetworkService` 类封装 Dio 的功能,包括请求拦截、响应拦截、Token 存储和登录请求。最后,通过一个登录界面示例展示了如何在实际应用中使用 `NetworkService` 进行身份验证。希望本文能帮助你在 Flutter 中更好地处理网络请求和用户认证。
542 1
|
12月前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
344 1

热门文章

最新文章

下一篇
开通oss服务