my_text_view.dart 5.1 KB

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