my_text_view.dart 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. import 'dart:ffi';
  2. import 'dart:ui';
  3. import 'package:flutter/material.dart';
  4. import 'ext/ex_widget.dart';
  5. // ignore: slash_for_doc_comments
  6. /**
  7. TextView + 容器的使用
  8. 内部使用各种容器包裹Text控件,用于一些复杂的UI效果
  9. 模板:
  10. TextView(
  11. "自定义textview自定义textview自定义textview自定义textview自定义textview",
  12. backgroundColor: Colors.red,
  13. textColor: Colors.white,
  14. padding: 10,
  15. cornerRadius: 10,
  16. borderColor: Colors.yellow,
  17. borderWidth: 1,
  18. marginTop: 5,
  19. singleLine: false,
  20. onClick: (){
  21. print("点击事件");
  22. }),
  23. */
  24. class MyTextView extends StatelessWidget {
  25. double? fontSize = 0;
  26. Color? textColor = Colors.black;
  27. Color? textHintColor;
  28. String content = "";
  29. String? hint;
  30. bool? isTextEllipsis = false;
  31. bool? isFontLight;
  32. bool? isFontRegular;
  33. bool? isFontMedium;
  34. bool? isFontBold;
  35. FontWeight? fontWeight;
  36. TextAlign? textAlign;
  37. FontStyle? fontStyle;
  38. int? maxLines;
  39. TextDecoration? textDecoration; //设置文本的装饰
  40. Color? decorationColor; //文本的装饰颜色
  41. double? decorationThickness; //装饰粗细
  42. TextDecorationStyle? decorationStyle; //装饰样式
  43. //底部是Text的父容器属性
  44. VoidCallback? onClick;
  45. double? cornerRadius = 0;
  46. double? cornerRadiusLeftTop;
  47. double? cornerRadiusRightTop;
  48. double? cornerRadiusLeftBottom;
  49. double? cornerRadiusRightBottom;
  50. double? borderWidth = 0;
  51. Color? borderColor = Colors.transparent;
  52. double? boxWidth; //限制TextView的宽高,为外部 Container 的属性
  53. double? boxHeight; //限制TextView的宽高,为外部 Container 的属性
  54. AlignmentGeometry? alignment;
  55. Color? backgroundColor = Colors.transparent;
  56. double? padding = 0;
  57. double? margin = 0;
  58. double? paddingLeft = 0;
  59. double? paddingRight = 0;
  60. double? paddingTop = 0;
  61. double? paddingBottom = 0;
  62. double? marginLeft = 0;
  63. double? marginRight = 0;
  64. double? marginTop = 0;
  65. double? marginBottom = 0;
  66. final ClickType type; //默认没有点击类型
  67. final int milliseconds; //点击类型的时间戳(毫秒)
  68. MyTextView(
  69. this.content, {
  70. Key? key,
  71. this.textColor,
  72. this.backgroundColor,
  73. this.padding,
  74. this.paddingTop,
  75. this.paddingBottom,
  76. this.paddingRight,
  77. this.textHintColor,
  78. this.hint,
  79. this.paddingLeft,
  80. this.cornerRadius,
  81. this.cornerRadiusLeftTop,
  82. this.cornerRadiusRightTop,
  83. this.cornerRadiusLeftBottom,
  84. this.cornerRadiusRightBottom,
  85. this.borderColor,
  86. this.borderWidth,
  87. this.marginBottom,
  88. this.marginLeft,
  89. this.marginRight,
  90. this.marginTop,
  91. this.margin,
  92. this.maxLines,
  93. this.fontSize,
  94. this.textDecoration,
  95. this.decorationColor,
  96. this.decorationThickness, //下划线
  97. this.decorationStyle,
  98. this.isTextEllipsis,
  99. this.isFontLight,
  100. this.isFontRegular,
  101. this.isFontMedium,
  102. this.isFontBold,
  103. this.fontWeight,
  104. this.textAlign,
  105. this.boxWidth,
  106. this.boxHeight,
  107. this.alignment,
  108. this.onClick,
  109. this.fontStyle,
  110. this.type = ClickType.none, //默认没有点击类型
  111. this.milliseconds = 500, //点击类型的时间戳(毫秒)
  112. }) : super(key: key) {
  113. if (padding != null && padding! > 0) {
  114. paddingLeft = padding;
  115. paddingRight = padding;
  116. paddingBottom = padding;
  117. paddingTop = padding;
  118. }
  119. if (margin != null && margin! > 0) {
  120. marginLeft = margin;
  121. marginTop = margin;
  122. marginRight = margin;
  123. marginBottom = margin;
  124. }
  125. if (isFontLight != null && isFontLight!) {
  126. fontWeight = FontWeight.w300;
  127. } else if (isFontRegular != null && isFontRegular!) {
  128. fontWeight = FontWeight.w400;
  129. } else if (isFontMedium != null && isFontMedium!) {
  130. fontWeight = FontWeight.w500;
  131. } else if (isFontBold != null && isFontBold!) {
  132. fontWeight = FontWeight.w700;
  133. } else {
  134. fontWeight = fontWeight ?? FontWeight.normal;
  135. }
  136. }
  137. @override
  138. Widget build(BuildContext context) {
  139. //如果需要 Container 就用 Container 包裹,否则直接返回Text
  140. if (onClick != null ||
  141. (cornerRadius ?? 0) > 0 ||
  142. (borderWidth ?? 0) > 0 ||
  143. boxWidth != null ||
  144. boxHeight != null ||
  145. backgroundColor != Colors.transparent ||
  146. (padding ?? 0) > 0 ||
  147. (margin ?? 0) > 0 ||
  148. (paddingLeft ?? 0) > 0 ||
  149. (paddingRight ?? 0) > 0 ||
  150. (paddingRight ?? 0) > 0 ||
  151. (paddingTop ?? 0) > 0 ||
  152. (paddingBottom ?? 0) > 0 ||
  153. (marginLeft ?? 0) > 0 ||
  154. (marginRight ?? 0) > 0 ||
  155. (marginTop ?? 0) > 0 ||
  156. (marginBottom ?? 0) > 0 ||
  157. alignment != null) {
  158. return onClick != null
  159. ? _warpWithContainer().onTap(
  160. //使用扩展的方式点击
  161. onClick!,
  162. type: type,
  163. milliseconds: milliseconds,
  164. )
  165. : _warpWithContainer();
  166. } else {
  167. return onClick != null
  168. ? _childText().onTap(
  169. //使用扩展的方式点击
  170. onClick!,
  171. type: type,
  172. milliseconds: milliseconds,
  173. )
  174. : _childText();
  175. }
  176. }
  177. //TextView需要用容器包裹
  178. Widget _warpWithContainer() {
  179. return Container(
  180. width: boxWidth,
  181. height: boxHeight,
  182. alignment: alignment,
  183. margin: EdgeInsets.fromLTRB(marginLeft ?? 0, marginTop ?? 0, marginRight ?? 0, marginBottom ?? 0),
  184. decoration: BoxDecoration(
  185. border: Border.all(width: borderWidth ?? 0, color: borderColor ?? Colors.transparent),
  186. color: backgroundColor,
  187. // borderRadius: BorderRadius.all(Radius.circular(cornerRadius ?? 0)),
  188. borderRadius: BorderRadius.only(
  189. topLeft: Radius.circular(cornerRadiusLeftTop ?? cornerRadius ?? 0),
  190. topRight: Radius.circular(cornerRadiusRightTop ?? cornerRadius ?? 0),
  191. bottomLeft: Radius.circular(cornerRadiusLeftBottom ?? cornerRadius ?? 0),
  192. bottomRight: Radius.circular(cornerRadiusRightBottom ?? cornerRadius ?? 0),
  193. ),
  194. ),
  195. padding: EdgeInsets.fromLTRB(paddingLeft ?? 0, paddingTop ?? 0, paddingRight ?? 0, paddingBottom ?? 0),
  196. child: textAlign == TextAlign.center ? Center(child: _childText()) : _childText(),
  197. );
  198. }
  199. //真正的Tex控件配置
  200. Widget _childText() {
  201. return Text(
  202. content.isEmpty ? hint ?? content : content,
  203. textAlign: textAlign ?? TextAlign.start,
  204. maxLines: maxLines,
  205. style: TextStyle(
  206. color: content.isEmpty ? textHintColor ?? textColor : textColor,
  207. fontSize: fontSize ?? 14,
  208. fontWeight: fontWeight,
  209. fontStyle: fontStyle,
  210. overflow: isTextEllipsis ?? false ? TextOverflow.ellipsis : TextOverflow.clip,
  211. // 可选,设置下划线的颜色
  212. decoration: textDecoration,
  213. decorationColor: decorationColor,
  214. // 可选,设置下划线的粗细
  215. decorationThickness: decorationThickness,
  216. decorationStyle: decorationStyle, // 可选,设置下划线的样式
  217. ),
  218. );
  219. }
  220. }