[TOC]
前言
如果你不是没有任何开发经验,那么你一定知道任何app里都有可能有重用性比较高的控件。所以对于那么重用性比较高的,或者需要你自定义的控件的,我们需要将它们给封装起来,以便下次或者其他app中继续使用。这也正式本节想要说的内容Flutter中如何封装Widget。
下面我从自己实现一个满意的封装,分别介绍你可能用到的三种封装方式
- 1、函数式封装
- 2、以继承 StatefulWidget 的方式封装
- 3、继承父类式封装(推荐)
下面我们以登录页的文本框的自定义来谈封装。
一、函数式封装
1 | /// 蓝色背景按钮(常用于:登录按钮) |
乍看没什么问题,好像很简洁。但当你也用这种方式来实现文本框的时候,其代码如下:
1 | /// 文本框(常用于:登录用户名、密码文本框) |
可见这种函数的方式,没办法处理过多属性的自定义。因为它并不像我们iOS中的UIView,可以对得到的控件在后续再定制。所以,在Flutter中这种函数式的封装不适合,因为它无法满足使用。
附:以下是iOS中的操作:
1 | - (CJTextField *)userNameTextField { |
二、以继承 StatefulWidget 的方式封装
1 | /// 文本框(常用于:登录用户名、密码文本框) |
使用的时候:
1 | TextField userNameTextField() { |
虽然使用上看似没什么问题,但是整个TextField的继承代码难道你不觉得有更简洁的写法吗?
所以下面将讲解直接继承TextFiled的方法。
三、继承父类式封装(推荐)
1 | /// 文本框(常用于:登录用户名、密码文本框) |
使用时候
1 | // 用户名文本框 |
可见使用继承父类式封装这种方式,不管在封装时候,还是在使用时候,写的代码都是最简洁的。而且后期如果要直接使用系统样式,也只需要改回类名,其他结构和属性都不用动即可。
四、强调自定义类的设计规范
在前面,我们已经知道使用继承父类式封装
这种方式,不管在封装时候,还是在使用时候,写的代码都是最简洁的。而且后期如果要直接使用系统样式,也只需要改回类名,其他结构和属性都不用动即可。
所以,即使是你所定义的类只有一个入参,也一定要遵守使用继承父类式封装
的设计规范。
以下以按钮中 textStyle 的传值为例:
1 | import 'package:flutter_baseui_kit/flutter_baseui_kit.dart'; |
附:bad 和 good 两种实现方式的代码分别如下:
bad:
1 | import 'package:flutter/material.dart'; |
good:
1 | import 'package:flutter/material.dart'; |
所以,综上在Flutter中对于一个Widget的封装,我们采用直接继承其父类的方式来处理,且其具体的写法如上。