--- highlight: a11y-dark --- 我正在参加「掘金·启航计划」 [Flutter控件之基类Widget封装](https://juejin.cn/post/7234436929554251831) 上篇文章，我们简单针对Widget做了一个基类封装，拓展出了很多常见又易用的属性，比如宽高，内外边距等等，很方便的为接下来的各个基础组件的封装，提供极大的便利，在上篇文章中，诉说了BaseWidget可以单独使用，也可以让别的组件继承使用，目的就是为了拓展，而本篇文章就是基于上篇，我们拓展一下Text组件。本篇文章的内容大概如下： **1、实际的效果一览** **2、Text相关属性分析** **3、源码和具体使用** **4、相关总结** ## 一、实际的效果一览文本Text比较简单，除了基类BaseWidget所提供的属性之外，又简单的扩展了部分属性，比如图文和富文本，都是系统原生的提供的，做了简单的封装。

## 二、Text相关属性分析关于文本的属性，为什么要去继承BaseWidget，也就是上篇封装的基类，一个重要的原因就是，拓展文本的点击，内外边距和相关背景等属性，方便在实际的开发中进行调用。文本所提供的常见属性，如文字的大小，颜色等，我们可以原封不动的抛出去，毕竟这都是基本的属性，我们没必要再一一自己实现，为了更好的符合实际的开发需要，比如富文本，带有Icon等等，我们尽量也拓展一下。自定义的文本属性相对不是很多，大致如下，这些属性，还是那句话，需要根据实际的需求和业务，我们选择性进行使用。 | 属性 | 类型 | 概述 | | --- | --- | --- | | text | String | 文本内容 | | style | TextStyle | 文本样式 | | leftIcon | String | 左边的图片 | | leftIconWidth | double | 左边的图片宽度 | | leftIconHeight | double | 左边的图片高度 | | iconMarginRight | double | 图片距离右边的文字距离 | | rightIcon | String | 右边的图片 | | rightIconWidth | double | 右边的图片宽度 | | rightIconHeight | double | 右边的图片高度 | | iconMarginLeft | double | 图片距离左边的文字距离 | | topIcon | String | 上边的图片 | | topIconWidth | double | 上边的图片宽度 | | topIconHeight | double | 上边的图片高度 | | iconMarginBottom | double | 图片距离下边的文字距离 | | bottomIcon | String | 下边的图片 | | bottomIconWidth | double | 下边的图片宽度 | | bottomIconHeight | double | 下边的图片高度 | | iconMarginTop | double | 图片距离上边的文字距离 | | mainAxisAlignment | MainAxisAlignment | 文字的相对父位置 | | textOverflow | TextOverflow | 文字溢出方式 | | textAlign | TextAlign | 文字位置 | | maxLines | int | 最大行数 | | richList | List\ | 富文本数据 | | onRichClick | Function(int, TextRichBean) | 富文本点击事件 | ## 三、源码和具体使用源码相对比较简单，毕竟都是系统的Api，无非就是做了一个简单的封装，首先是继承了BaseWidget，实现了getWidget方法，这个很重要，因为所有的组件效果，都是从这个方法里进行渲染的。关于这个Text类，需要注意是，如果你想把基类的属性拓展出去，那么就可以在构造方法里进行super一下，具体需要拓展哪些，完全按实际的业务去走，并不是所有的属性都需要拓展。相关注释已经标记，大家可以直接使用。 ### 自定义文本源码 ```dart import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import '../../base/base_widget.dart'; import '../../data/bean/text_rich_bean.dart'; ///AUTHOR:AbnerMing ///DATE:2023/5/19 ///INTRODUCE:文本控件 Text class VipText extends BaseWidget { final String text; //文本内容 final TextStyle? style; //文本样式 final String? leftIcon; //左边的图片 final double? leftIconWidth; //左边的图片宽度 final double? leftIconHeight; //左边的图片高度 final double? iconMarginRight; //图片距离右边的文字距离 final String? rightIcon; //右边的图片 final double? rightIconWidth; //右边的图片宽度 final double? rightIconHeight; //右边的图片高度 final double? iconMarginLeft; //图片距离左边的文字距离 final String? topIcon; //上边的图片 final double? topIconWidth; //上边的图片宽度 final double? topIconHeight; //上边的图片高度 final double? iconMarginBottom; //图片距离下边的文字距离 final String? bottomIcon; //下边的图片 final double? bottomIconWidth; //下边的图片宽度 final double? bottomIconHeight; //下边的图片高度 final double? iconMarginTop; //图片距离上边的文字距离 final MainAxisAlignment? mainAxisAlignment; //文字的位置 final TextOverflow? textOverflow; //文字溢出方式 final TextAlign? textAlign;//文字位置 final int? maxLines;//最大行数 final List? richList; //富文本数据 final Function(int, TextRichBean)? onRichClick; //富文本点击事件 const VipText(this.text, {super.key, this.style, this.leftIcon, this.leftIconWidth = 22, this.leftIconHeight = 22, this.iconMarginRight = 0, this.rightIcon, this.rightIconWidth = 22, this.rightIconHeight = 22, this.iconMarginLeft = 0, this.topIcon, this.topIconWidth = 22, this.topIconHeight = 22, this.iconMarginBottom = 0, this.bottomIcon, this.bottomIconWidth = 22, this.bottomIconHeight = 22, this.iconMarginTop = 0, this.mainAxisAlignment = MainAxisAlignment.center, this.textOverflow, this.textAlign, this.maxLines, this.richList, this.onRichClick, 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}); /* * 返回图片的组件 * */ Widget getImageWidget(String icon, double width, double height) { if (icon.contains("http")) { return Image.network(icon, width: width, height: height); } else { return Image.asset(icon, width: width, height: height); } } @override Widget getWidget(BuildContext context) { List widgets = []; //左边的Icon if (leftIcon != null) { widgets.add(getImageWidget(leftIcon!, leftIconWidth!, leftIconHeight!)); } //水平中间的文字 if (leftIcon != null || rightIcon != null) { widgets.add(Container( margin: EdgeInsets.only(left: iconMarginRight!, right: iconMarginLeft!), child: getTextWidget(), )); } //右边的Icon if (rightIcon != null) { widgets .add(getImageWidget(rightIcon!, rightIconWidth!, rightIconHeight!)); } if (widgets.isNotEmpty) { return Row( mainAxisAlignment: mainAxisAlignment!, children: widgets, ); } //上边的icon if (topIcon != null) { widgets.add(getImageWidget(topIcon!, topIconWidth!, topIconHeight!)); } //垂直中间的文字 if (topIcon != null || bottomIcon != null) { widgets.add(Container( margin: EdgeInsets.only(top: iconMarginBottom!, bottom: iconMarginTop!), child: getTextWidget(), )); } //下面的icon if (bottomIcon != null) { widgets.add( getImageWidget(bottomIcon!, bottomIconWidth!, bottomIconHeight!)); } if (widgets.isNotEmpty) { return Column( mainAxisAlignment: mainAxisAlignment!, children: widgets, ); } //富文本 if (richList != null && richList!.isNotEmpty) { List list = []; for (var a = 0; a < richList!.length; a++) { var richBean = richList![a]; var textSpan = TextSpan( text: richBean.text, recognizer: TapGestureRecognizer() ..onTap = () { //点击事件 if (onRichClick != null) { onRichClick!(a, richBean); } }, style: TextStyle( fontSize: richBean.textSize, color: richBean.textColor)); list.add(textSpan); } //富文本 return Text.rich(TextSpan(children: list)); } return getTextWidget(); } Widget getTextWidget() { return Text( text, overflow: textOverflow, textAlign: textAlign, maxLines: maxLines, style: style, ); } } ``` ### TextRichBean 用于富文本数据渲染 ```dart import 'package:flutter/material.dart'; ///AUTHOR:AbnerMing ///DATE:2023/5/19 ///INTRODUCE:文本控件之富文本对象 class TextRichBean { String? text; //文字 Color? textColor; //文字颜色 double? textSize; //文字大小 String? link; //文字链接 TextRichBean({this.text, this.textColor, this.textSize, this.link}); } ``` ### 具体使用简单的就可以如下使用，需要什么属性，直接书写即可，比如内外边距，点击事件等等。 ```dart VipText("普通文字", marginTop: 10, onClick: () { print("普通文字"); }) ``` 所有使用方式案例（可直接复制使用） ```dart import 'package:flutter/material.dart'; import '../../data/bean/text_rich_bean.dart'; import '../widget/vip_text.dart'; ///AUTHOR:AbnerMing ///DATE:2023/5/19 ///INTRODUCE:文本Text效果 class TextPage extends StatefulWidget { const TextPage({super.key}); @override State createState() => _TextPageState(); } class _TextPageState extends State { @override Widget build(BuildContext context) { return Column( children: [ VipText("普通文字", marginTop: 10, onClick: () { print("普通文字"); }), VipText("加粗文字", marginTop: 10, style: const TextStyle(fontWeight: FontWeight.bold), onClick: () { print("加粗文字"); }), VipText("倾斜文字", marginTop: 10, style: const TextStyle(fontStyle: FontStyle.italic), onClick: () { print("倾斜文字"); }), VipText("文字背景颜色", marginTop: 10, backgroundColor: Colors.red, onClick: () { print("文字背景颜色"); }), VipText("文字圆角背景", marginTop: 10, radius: 10, solidColor: Colors.red, padding: 3, onClick: () { print("文字圆角背景"); }), VipText("文字圆角框背景", marginTop: 10, radius: 10, strokeColor: Colors.red, padding: 3, onClick: () { print("文字圆角框背景"); }), VipText("圆", marginTop: 10, isCircle: true, solidColor: Colors.cyan, padding: 8, onClick: () { print("圆"); }), VipText("下划线文字", marginTop: 10, style: const TextStyle(decoration: TextDecoration.underline), onClick: () { print("下划线文字"); }), VipText("下划波浪线文字", marginTop: 10, style: const TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.wavy, ), onClick: () { print("下划波浪线文字"); }), VipText("删除线文字", marginTop: 10, style: const TextStyle(decoration: TextDecoration.lineThrough), onClick: () { print("删除线文字"); }), ShaderMask( shaderCallback: (Rect bounds) { return const LinearGradient( colors: [Colors.red, Colors.blue], ).createShader(Offset.zero & bounds.size); }, child: VipText( '文字设置渐变色', marginTop: 10, style: const TextStyle( fontSize: 16, color: Colors.white, fontWeight: FontWeight.bold, ), onClick: () { print("文字设置渐变色"); }, ), ), VipText("改变颜色", style: const TextStyle(color: Colors.red), marginTop: 10, onClick: () { print("改变颜色"); }), VipText("左边带有Icon", marginTop: 10, //可以是网络图片或assets图片 leftIcon: "https://www.vipandroid.cn/ming/image/gan.png", iconMarginRight: 10, onClick: () { print("左边带有Icon"); }), VipText("右边带有Icon", marginTop: 10, //可以是网络图片或assets图片 rightIcon: "https://www.vipandroid.cn/ming/image/gan.png", iconMarginLeft: 10, onClick: () { print("左边带有Icon"); }), VipText("左右边都带有Icon", marginTop: 10, //可以是网络图片或assets图片 leftIcon: "https://www.vipandroid.cn/ming/image/gan.png", rightIcon: "https://www.vipandroid.cn/ming/image/gan.png", iconMarginRight: 10, iconMarginLeft: 10, onClick: () { print("左右边都带有Icon"); }), VipText("上边带有Icon", marginTop: 10, strokeColor: Colors.red, //可以是网络图片或assets图片 topIcon: "https://www.vipandroid.cn/ming/image/gan.png", onClick: () { print("上边带有Icon"); }), VipText("下边带有Icon", strokeColor: Colors.red, marginTop: 10, //可以是网络图片或assets图片 bottomIcon: "https://www.vipandroid.cn/ming/image/gan.png", onClick: () { print("下边带有Icon"); }), VipText( "超出的文字展示省略号，不妨我们就简单测试一下，看看是否能实现，再多打些文字看看吧，马上就够了，不着急哈，再输入一点", textOverflow: TextOverflow.ellipsis, marginLeft: 10, marginRight: 10, maxLines: 2, marginTop: 10, onClick: () { print("超出文字点击"); }, ), VipText("富文本设置", richList: [ TextRichBean(text: "我已经阅读并同意"), TextRichBean(text: "《用户服务协议》", textColor: Colors.red), TextRichBean(text: "和"), TextRichBean(text: "《用户隐私政策》", textColor: Colors.red) ], onRichClick: (position, richBean) { //富文本点击事件 print(richBean.text); }, marginTop: 10) ], ); } } ``` ## 四、相关总结关于子类需要拓展父类的哪些属性，这个需要结合实际的项目和需求而定，而关于自定义组件的命名，也需要根据公司而定，好了老铁们，一个简单的文本组件就介绍到这里，希望可以帮助到大家。