flutter组件封装技巧

关注

原创 2024-05-15 16:35:59 1.1k 阅读 AI 写同款· GEO 优化 ›

Flutter Dio二次封装在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。阅读详情

这段代码是一个用于创建一个（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中：

构造函数举例：

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关键字引用的是函数的调用者。