Flutter控件之基类Widget封装

在短时间的接触Flutter之后，有一个问题一直摆在了明面上，那就是，Flutter中的Widget确实没有Android中的控件好用，在Android中，比如TextView，ImageView等等或者其他View，都有着自己非常广泛的属性和方法，比如宽，高，margin和padding，以及相关的点击事件，这在Flutter，对应的控件中，却少了这些基础又常用的属性，以至于每写一个Widget，如果想要实现点击事件，或者margin，padding，不得不用其他的Widget包裹一层，使用起来很是不方便，基于以上的背景，便萌生了一个封装基类的想法。

虽然之前接触过Flutter，但也是许久不用了，今再拾起，难免有些许不足，如果在封装上有哪些问题，还望不吝赐教。

本篇文章大致概述如下：

1、需要封装哪些属性

2、确定基类Widget

3、基类实现

4、相关总结

一、需要封装哪些属性

具体需要哪些属性，不是越多越好，也不是越少越好，而是基于实际的开发需求，拓展出常用的即可。

一个文本或者图片控件又或者是其他控件，在实际的开发中，哪些是我们需要考虑的？是不是最常见的就是自身的宽高，这是最常见且必须需要的，除了宽高，其自身的点击事件，也是频次居高不下的一个属性，所以，在基类Widget中，其宽、高、点击事件是必须要存在的，说到事件，除了点击事件之外，一些需求中的双击或者长按事件也是存在的，所以，尽量也封到基类中，便于子类控件的使用。

除此之外，像外边距、内边距、也是必不可少的属性，不敢说十个控件有九个用到，起码说也得一半以上的概率，所以，这也是要封装到基类中的；至于背景属性，比如圆角的，圆形的，空心的，实心的，这些看实际的项目使用，如果需要，也可以放到基类中。

初步罗列了一下，大致封装的属性如下，当然了，每个人的封装都有不同，主要还是要看实际的需求。

二、确定基类Widget

基类的Widget主要确定以下几个方面，第一就是，自定义一个抽象类还是非抽象类，第二、继承方式，采取有状态还是无状态，第三、关于组件的点击方式，如何进行实现。

一开始自己写的是一个抽象基类，毕竟在接下来的操作中，对于各个控件，我都会重新在原生的基础之上进行再次的封装，而不是独立的使用，这种情况下，抽象类是最合适的，向子类拓展出必须要实现的方法即可，但是这种情况下就有一个弊端，那就是，原生的控件无法享有这个基类的各个属性，没办法，最后又改为了非抽象类，这样，两种方式均可满足。

关于继承方式，对于一个页面而言，或多或少都是需要渲染数据，更新UI的，这种情况下继承StatefulWidget是肯定的，但是一般一个控件，都是别人来触发它，而它自己很少主动触发，所以，一般而言，我们继承StatelessWidget即可。

关于组件的点击方式，如果是非Button级别的，很少有控件自带点击事件，所以我们不得不自行实现，而在Flutter中提供了很多可以协助实现点击的组件，比如InkWell，GestureDetector，InkResponse，原始指针事件Listener，都为我们提供了丰富的触摸事件，下面简单的列举一下：

InkWell

InkWell(
      onLongPress: (){
        print("长按事件");
      },
      onDoubleTap: (){
        print("双击事件");
      },
      onTap: (){
        print("点击事件");
      }
      child: Container()
)

GestureDetector

return GestureDetector(
      child: const Text("首页"),
  		onLongPress: (){
        print("长按事件");
      },
      onDoubleTap: (){
        print("双击事件");
      },
      onTap: (){
        print("点击事件");
      },
      onPanDown: (DragDownDetails detail) {
        // 手指按下的相对于屏幕的位置
        print("手指按下回调");
      },
      onPanUpdate: (DragUpdateDetails detail) {
        print("手指滑动回调");
      },
      onPanEnd: (DragEndDetails detail) {
        print("手指停止滑动回调");
      },
  		// 垂直方向拖动事件
      onVerticalDragUpdate: (DragUpdateDetails details) {
      
      },
      // 水平方向拖动事件
      onHorizontalDragUpdate: (DragUpdateDetails details) {
        
      },
    );

InkResponse

return InkResponse(
      child: const Text("点击"),
      onTap: () {
        //点击事件
        print("点击事件");
      },
      onLongPress: () {
        //长按事件
        print("长按事件");
      },
      onDoubleTap: () {
        //双击事件
        print("双击事件");
      },
    );

原始指针事件

return Listener(
      child: Container(
        child: const Text("测试"),
      ),
  		//手指按下回调
      onPointerDown: (PointerDownEvent event) {},
  		//手指移动回调
      onPointerMove: (PointerMoveEvent event) {},
  		//手指抬起回调
      onPointerUp: (PointerUpEvent event) {},
  		//触摸事件取消回调
      onPointerCancel: (PointerCancelEvent event) {},
    );

相关的属性有很多，大家可以看下相关源码，具体用哪个，我是认为，前三个都可以，毕竟都有相关的点击，双击，长按事件，如果你想要获取更多的触摸事件，那么就可以使用GestureDetector，如果只是点击，长按和双击，比较推荐InkWell，相对点击比较灵敏，当然了，具体使用哪个，还是要看自己。

三、基类实现

基类实现就比较的简单了，build方法中最外层用点击事件包裹，再往下用Container组件来包裹，目的用于宽高，margin，padding和背景等实现，圆角和圆形以及渐变用的是Container的属性decoration。

全部的源码如下，都是系统的api调用，没有特别难的。

import 'package:flutter/material.dart';

///AUTHOR:AbnerMing
///DATE:2023/5/11
///INTRODUCE:控件无状态基类

class BaseWidget extends StatelessWidget {
  final VoidCallback? onClick; //点击事件
  final VoidCallback? onDoubleClick; //双击事件
  final VoidCallback? onLongPress; //长按事件
  final double? width; //宽度
  final double? height; //高度
  final double? margin; //外边距，左上右下
  final double? marginLeft; //外边距，距离左边
  final double? marginTop; //外边距，距离上边
  final double? marginRight; //外边距，距离右边
  final double? marginBottom; //外边距，距离下边
  final double? padding; //内边距，左上右下
  final double? paddingLeft; //内边距，距离左边
  final double? paddingTop; //内边距，距离上边
  final double? paddingRight; //内边距，距离右边
  final double? paddingBottom; //内边距，距离下边
  final Color? backgroundColor; //背景颜色 和 decoration 二者取其一
  final double? strokeWidth; //背景边框统一的宽度
  final Color? strokeColor; //背景边框的颜色
  final Color? solidColor; //背景填充颜色
  final double? radius; //背景的角度
  final bool? isCircle; //背景是否是圆形
  final double? leftTopRadius; //背景左上角度
  final double? rightTopRadius; //背景 右上角度
  final double? leftBottomRadius; //背景 左下角度
  final double? rightBottomRadius; //背景 右下角度
  final Widget? childWidget; //子控件
  final Alignment? alignment; //位置
  final int? gradient; //渐变方式，为支持后续拓展，用int类型
  final List<Color>? gradientColorList; //渐变颜色
  final List<double>? gradientColorStops; //颜色值梯度，取值范围[0,1]
  final Alignment? gradientBegin; //渐变起始位置
  final Alignment? gradientEnd; //渐变结束位置

  //边框的颜色
  const BaseWidget(
      {super.key,
      this.width,
      this.height,
      this.margin,
      this.marginLeft,
      this.marginTop,
      this.marginRight,
      this.marginBottom,
      this.padding,
      this.paddingLeft,
      this.paddingTop,
      this.paddingRight,
      this.paddingBottom,
      this.backgroundColor,
      this.strokeWidth,
      this.strokeColor,
      this.solidColor,
      this.radius,
      this.isCircle,
      this.leftTopRadius,
      this.rightTopRadius,
      this.leftBottomRadius,
      this.rightBottomRadius,
      this.childWidget,
      this.alignment,
      this.gradient,
      this.gradientColorList,
      this.gradientColorStops,
      this.gradientBegin,
      this.gradientEnd,
      this.onClick,
      this.onDoubleClick,
      this.onLongPress});

  @override
  Widget build(BuildContext context) {
    return InkWell(
        highlightColor: Colors.transparent,
        // 透明色
        splashColor: Colors.transparent,
        // 透明色
        onTap: onClick,
        onDoubleTap: onDoubleClick,
        onLongPress: onLongPress,
        child: Container(
          width: width,
          height: height,
          alignment: alignment,
          margin: margin != null
              ? EdgeInsets.all(margin!)
              : EdgeInsets.only(
                  left: marginLeft != null ? marginLeft! : 0,
                  top: marginTop != null ? marginTop! : 0,
                  right: marginRight != null ? marginRight! : 0,
                  bottom: marginBottom != null ? marginBottom! : 0),
          padding: padding != null
              ? EdgeInsets.all(padding!)
              : EdgeInsets.only(
                  left: paddingLeft != null ? paddingLeft! : 0,
                  top: paddingTop != null ? paddingTop! : 0,
                  right: paddingRight != null ? paddingRight! : 0,
                  bottom: paddingBottom != null ? paddingBottom! : 0,
                ),
          color: backgroundColor,
          decoration: backgroundColor != null ? null : getDecoration(),
          child: childWidget ?? getWidget(context),
        ));
  }

  /*
  * 获取Decoration
  * */
  Decoration? getDecoration() {
    BorderRadiusGeometry? borderRadiusGeometry;
    if (radius != null) {
      //所有的角度
      borderRadiusGeometry = BorderRadius.all(Radius.circular(radius!));
    } else {
      //否则就是，各个角度
      borderRadiusGeometry = BorderRadius.only(
          topLeft: Radius.circular(leftTopRadius != null ? leftTopRadius! : 0),
          topRight:
              Radius.circular(rightTopRadius != null ? rightTopRadius! : 0),
          bottomLeft:
              Radius.circular(leftBottomRadius != null ? leftBottomRadius! : 0),
          bottomRight: Radius.circular(
              rightBottomRadius != null ? rightBottomRadius! : 0));
    }
    Gradient? tGradient;
    if (gradient != null) {
      tGradient = LinearGradient(
        colors: gradientColorList != null ? gradientColorList! : [],
        // 设置有哪些渐变色
        begin: gradientBegin != null ? gradientBegin! : Alignment.centerLeft,
        // 渐变色开始的位置，默认 centerLeft
        end: gradientEnd != null ? gradientEnd! : Alignment.centerRight,
        // 渐变色结束的位置，默认 centerRight
        stops: gradientColorStops, // 颜色值梯度，取值范围[0,1]，长度要和 colors 的长度一样
      );
    }
    Decoration? widgetDecoration = BoxDecoration(
      gradient: tGradient,
      //背景颜色
      color: solidColor != null ? solidColor! : Colors.transparent,
      //圆角半径
      borderRadius: isCircle == true ? null : borderRadiusGeometry,
      //是否是圆形
      shape: isCircle == true ? BoxShape.circle : BoxShape.rectangle,
      //边框线宽、颜色
      border: Border.all(
          width: strokeWidth != null ? strokeWidth! : 0,
          color: strokeColor != null ? strokeColor! : Colors.transparent),
    );
    return widgetDecoration;
  }

  /*
  * 获取控件
  * */
  Widget? getWidget(BuildContext context) {
    return null;
  }
}

具体使用

使用方式有两种，一种是直接使用，用BaseWidget包裹你的组件即可，相关属性和方法就可以直接调用了。

return BaseWidget(
      childWidget: const Text("测试文本"),
      margin: 10,
      onClick: () {
        //点击事件
      },
    );

第二种就是，自己定义组件，继承BaseWidget，可扩展自己想要实现的属性，之后直接用自己定义的组件即可，比如我想自定义一个Text，如下所示：

class SelfText extends BaseWidget {
  final String? text;

  const SelfText(this.text,
      {super.key,
      super.width,
      super.height,
      super.margin,
      super.marginLeft,
      super.marginTop,
      super.marginRight,
      super.marginBottom,
      super.padding,
      super.paddingLeft,
      super.paddingTop,
      super.paddingRight,
      super.paddingBottom,
      super.backgroundColor,
      super.strokeWidth,
      super.strokeColor,
      super.solidColor,
      super.radius,
      super.isCircle,
      super.leftTopRadius,
      super.rightTopRadius,
      super.leftBottomRadius,
      super.rightBottomRadius,
      super.childWidget,
      super.alignment,
      super.onClick,
      super.onDoubleClick,
      super.onLongPress});

  @override
  Widget? getWidget(BuildContext context) {
    return Text(text!);
  }
}

具体使用的时候，直接使用，就不用在外层包裹BaseWidget，而且你还可以在自定义类中随意扩展自己的属性。

return SelfText(
      "测试文本",
      margin: 10,
      onClick: () {
        //点击事件
      },
    );

四、相关总结

在实际的开发中，Widget的基类还是很有必要存在的，不然就会存在很多的冗余嵌套代码，具体如何去封装，还要根据相关的需求和业务来实际的操作。好了铁子们，本篇文章就到这里，不管封装的好与坏，都希望可以帮助到大家。