image.dart 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. /*
  2. * @Author: XianKaiQun
  3. * @Date: 2020-04-22 09:23:26
  4. * @LastEditors : WuWei
  5. * @LastEditTime : 2023-05-24 15:08:59
  6. * @Descripttion:
  7. */
  8. import 'dart:io' show File;
  9. import 'dart:typed_data';
  10. import 'package:cached_network_image/cached_network_image.dart';
  11. import 'package:flutter/material.dart';
  12. import 'package:octo_image/octo_image.dart';
  13. import 'package:wisdom_cli/new/utils/cache_image.dart';
  14. class WImage extends StatelessWidget {
  15. const WImage({
  16. Key? key,
  17. this.placeholder,
  18. required this.image,
  19. this.excludeFromSemantics = false,
  20. this.imageSemanticLabel,
  21. this.fadeOutDuration = const Duration(milliseconds: 150),
  22. this.fadeOutCurve,
  23. this.fadeInDuration = const Duration(milliseconds: 150),
  24. this.fadeInCurve,
  25. this.width,
  26. this.height,
  27. this.fit,
  28. this.alignment = Alignment.center,
  29. this.repeat = ImageRepeat.noRepeat,
  30. this.matchTextDirection = false,
  31. this.borderRadius,
  32. this.isCache,
  33. }) : assert(image != null),
  34. assert(fadeOutDuration != null),
  35. // assert(fadeOutCurve != null),
  36. assert(fadeInDuration != null),
  37. // assert(fadeInCurve != null),
  38. assert(repeat != null),
  39. assert(matchTextDirection != null),
  40. super(key: key);
  41. WImage.network(
  42. String src, {
  43. Key? key,
  44. this.placeholder,
  45. this.excludeFromSemantics = false,
  46. this.imageSemanticLabel,
  47. this.fadeOutDuration = const Duration(milliseconds: 150),
  48. this.fadeOutCurve = Curves.easeOut,
  49. this.fadeInDuration = const Duration(milliseconds: 150),
  50. this.fadeInCurve = Curves.easeIn,
  51. this.width,
  52. this.height,
  53. this.fit,
  54. this.alignment = Alignment.center,
  55. this.repeat = ImageRepeat.noRepeat,
  56. this.matchTextDirection = false,
  57. this.borderRadius,
  58. this.isCache,
  59. }) : assert(fadeOutDuration != null),
  60. assert(fadeOutCurve != null),
  61. assert(fadeInDuration != null),
  62. assert(fadeInCurve != null),
  63. assert(repeat != null),
  64. assert(matchTextDirection != null),
  65. image = CachedNetworkImageProvider(src),
  66. super(key: key);
  67. WImage.cache(
  68. String src, {
  69. Key? key,
  70. this.placeholder,
  71. this.excludeFromSemantics = false,
  72. this.imageSemanticLabel,
  73. this.fadeOutDuration = const Duration(milliseconds: 0),
  74. this.fadeOutCurve,
  75. this.fadeInDuration = const Duration(milliseconds: 0),
  76. this.fadeInCurve,
  77. this.width,
  78. this.height,
  79. this.fit,
  80. this.alignment = Alignment.center,
  81. this.repeat = ImageRepeat.noRepeat,
  82. this.matchTextDirection = false,
  83. this.borderRadius,
  84. this.isCache = true,
  85. }) : assert(fadeOutDuration != null),
  86. // assert(fadeOutCurve != null),
  87. assert(fadeInDuration != null),
  88. // assert(fadeInCurve != null),
  89. assert(repeat != null),
  90. assert(matchTextDirection != null),
  91. image = WisLocalCacheNetworkImage(src, isLocalCache: true),
  92. super(key: key);
  93. WImage.asset(
  94. String assetName, {
  95. Key? key,
  96. this.placeholder,
  97. this.excludeFromSemantics = false,
  98. this.imageSemanticLabel,
  99. this.fadeOutDuration = const Duration(milliseconds: 1),
  100. this.fadeOutCurve = Curves.easeOut,
  101. this.fadeInDuration = const Duration(milliseconds: 1),
  102. this.fadeInCurve = Curves.easeIn,
  103. this.width,
  104. this.height,
  105. this.fit,
  106. this.alignment = Alignment.center,
  107. this.repeat = ImageRepeat.noRepeat,
  108. this.matchTextDirection = false,
  109. this.borderRadius,
  110. String? package,
  111. this.isCache,
  112. }) : assert(fadeOutDuration != null),
  113. assert(fadeOutCurve != null),
  114. assert(fadeInDuration != null),
  115. assert(fadeInCurve != null),
  116. assert(repeat != null),
  117. assert(matchTextDirection != null),
  118. image = AssetImage(assetName, package: package),
  119. super(key: key);
  120. WImage.file(
  121. File file, {
  122. Key? key,
  123. this.placeholder,
  124. this.excludeFromSemantics = false,
  125. this.imageSemanticLabel,
  126. this.fadeOutDuration = const Duration(milliseconds: 1),
  127. this.fadeOutCurve = Curves.easeOut,
  128. this.fadeInDuration = const Duration(milliseconds: 1),
  129. this.fadeInCurve = Curves.easeIn,
  130. this.width,
  131. this.height,
  132. this.fit,
  133. this.alignment = Alignment.center,
  134. this.repeat = ImageRepeat.noRepeat,
  135. this.matchTextDirection = false,
  136. this.borderRadius,
  137. this.isCache,
  138. }) : assert(fadeOutDuration != null),
  139. assert(fadeOutCurve != null),
  140. assert(fadeInDuration != null),
  141. assert(fadeInCurve != null),
  142. assert(repeat != null),
  143. assert(matchTextDirection != null),
  144. image = FileImage(file),
  145. super(key: key);
  146. WImage.memory(
  147. Uint8List bytes, {
  148. Key? key,
  149. this.placeholder,
  150. this.excludeFromSemantics = false,
  151. this.imageSemanticLabel,
  152. this.fadeOutDuration = const Duration(milliseconds: 150),
  153. this.fadeOutCurve = Curves.easeOut,
  154. this.fadeInDuration = const Duration(milliseconds: 150),
  155. this.fadeInCurve = Curves.easeIn,
  156. this.width,
  157. this.height,
  158. this.fit,
  159. this.alignment = Alignment.center,
  160. this.repeat = ImageRepeat.noRepeat,
  161. this.matchTextDirection = false,
  162. this.borderRadius,
  163. this.isCache,
  164. }) : assert(fadeOutDuration != null),
  165. assert(fadeOutCurve != null),
  166. assert(fadeInDuration != null),
  167. assert(fadeInCurve != null),
  168. assert(repeat != null),
  169. assert(matchTextDirection != null),
  170. image = MemoryImage(bytes),
  171. super(key: key);
  172. final Widget? placeholder;
  173. final ImageProvider? image;
  174. final Duration? fadeOutDuration;
  175. final Curve? fadeOutCurve;
  176. final Duration? fadeInDuration;
  177. final Curve? fadeInCurve;
  178. final double? width;
  179. final double? height;
  180. final BoxFit? fit;
  181. final AlignmentGeometry? alignment;
  182. final ImageRepeat? repeat;
  183. final bool? matchTextDirection;
  184. final bool? excludeFromSemantics;
  185. final String? imageSemanticLabel;
  186. final BorderRadius? borderRadius;
  187. final bool? isCache;
  188. @override
  189. Widget build(BuildContext context) {
  190. Widget result = OctoImage(
  191. image: image!,
  192. width: width,
  193. height: height,
  194. fit: fit,
  195. alignment: alignment as Alignment? ?? Alignment.center,
  196. repeat: repeat,
  197. matchTextDirection: matchTextDirection,
  198. gaplessPlayback: true,
  199. errorBuilder: (context, error, stackTrace) {
  200. return ColoredBox(
  201. color: Colors.black12,
  202. child: Icon(
  203. Icons.broken_image,
  204. color: Colors.black45,
  205. ),
  206. );
  207. },
  208. );
  209. /// 缓存无需使用OctoImage,会自带动画效果
  210. if (isCache == true)
  211. result = SizedBox(
  212. width: width,
  213. height: height,
  214. child: Image(
  215. image: image!,
  216. width: width,
  217. height: height,
  218. fit: fit,
  219. alignment: alignment ?? Alignment.center,
  220. repeat: repeat!,
  221. matchTextDirection: matchTextDirection!,
  222. gaplessPlayback: true,
  223. errorBuilder: (context, error, stackTrace) {
  224. return ColoredBox(
  225. color: Colors.black12,
  226. child: Icon(
  227. Icons.broken_image,
  228. color: Colors.black45,
  229. ),
  230. );
  231. },
  232. ),
  233. );
  234. ///高度长度限制一下,如果只在image中限制 那么淡出效果会导致图片布局异常
  235. if (height != null || width != null)
  236. result = SizedBox(
  237. width: width,
  238. height: height,
  239. child: result,
  240. );
  241. ///圆角
  242. if (borderRadius != null)
  243. result = ClipRRect(
  244. borderRadius: borderRadius ?? BorderRadius.zero,
  245. child: result,
  246. );
  247. if (!excludeFromSemantics!) {
  248. result = Semantics(
  249. container: imageSemanticLabel != null,
  250. image: true,
  251. label: imageSemanticLabel ?? '',
  252. child: result,
  253. );
  254. }
  255. return result;
  256. }
  257. }