my_appbar.dart 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter/services.dart';
  4. import 'package:flutter/widgets.dart';
  5. import 'package:get/get.dart';
  6. import 'package:cs_resources/generated/assets.dart';
  7. import 'package:cs_resources/constants/color_constants.dart';
  8. import 'my_load_image.dart';
  9. import 'search_app_bar.dart';
  10. class MyAppBar {
  11. ///封装的默认的AppBar,Light默认模式下,黑色图标+黑色文本,Dark模式下,白色图标+白色文本
  12. static AppBar appBar(BuildContext context, String title,
  13. {void Function()? backCallback,
  14. String? backIconPath,
  15. double? backIconWidth,
  16. double? backIconHeight,
  17. String? subTitle,
  18. Color? subTitleColor,
  19. Color textColor = Colors.white,
  20. Color backgroundColor = Colors.transparent,
  21. SystemUiOverlayStyle? systemUiOverlayStyle,
  22. List<Widget>? actions}) {
  23. return AppBar(
  24. //设置变色与背景颜色一致,避免滚动的时候AppBar变色
  25. backgroundColor: backgroundColor,
  26. surfaceTintColor: backgroundColor,
  27. systemOverlayStyle: systemUiOverlayStyle,
  28. leading: IconButton(
  29. icon: MyAssetImage(backIconPath ?? Assets.baseLibWhiteBack, width: backIconWidth ?? 11, height: backIconHeight ?? 18),
  30. onPressed: () {
  31. if (backCallback != null) {
  32. backCallback();
  33. } else {
  34. Get.back();
  35. // Navigator.pop(context);
  36. }
  37. },
  38. ),
  39. centerTitle: true,
  40. title: subTitle == null
  41. ? Text(
  42. title,
  43. style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w500),
  44. )
  45. : Column(
  46. mainAxisSize: MainAxisSize.max,
  47. mainAxisAlignment: MainAxisAlignment.center,
  48. crossAxisAlignment: CrossAxisAlignment.center,
  49. children: [
  50. Text(
  51. title,
  52. style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w500),
  53. ),
  54. Text(
  55. subTitle,
  56. style: TextStyle(color: subTitleColor ?? Colors.white, fontSize: 15, fontWeight: FontWeight.w400),
  57. )
  58. ],
  59. ),
  60. actions: actions,
  61. elevation: 0.0,
  62. bottom: PreferredSize(
  63. preferredSize: const Size.fromHeight(0.5),
  64. child: Divider(
  65. height: 0.5,
  66. indent: 0.0,
  67. color: ColorConstants.dividerBar,
  68. )),
  69. );
  70. }
  71. //自定义高度快
  72. static SizedBox rowHeight({double height = 30}) {
  73. return SizedBox(height: height);
  74. }
  75. //自定义宽度快
  76. static SizedBox rowWidth({double width = 30}) {
  77. return SizedBox(width: width);
  78. }
  79. /// 带搜索的AppBar
  80. static AppBar appSearchBar(BuildContext context,
  81. {void Function()? backCallback,
  82. String? value,
  83. String? hintText,
  84. Color textColor = Colors.white,
  85. Color backgroundColor = Colors.transparent,
  86. ValueChanged<String>? onSearch,
  87. ValueChanged<String>? onChanged,
  88. SystemUiOverlayStyle? systemUiOverlayStyle,
  89. TextEditingController? controller,
  90. List<Widget>? actions}) {
  91. return AppBar(
  92. backgroundColor: backgroundColor,
  93. surfaceTintColor: backgroundColor,
  94. systemOverlayStyle: systemUiOverlayStyle,
  95. // 标题与其他控件的间隔
  96. titleSpacing: 0,
  97. leading: IconButton(
  98. icon: MyAssetImage(Assets.baseLibWhiteBack, width: 11, height: 18),
  99. onPressed: () {
  100. if (backCallback != null) {
  101. backCallback();
  102. } else {
  103. Get.back();
  104. // Navigator.pop(context);
  105. }
  106. },
  107. ),
  108. centerTitle: true,
  109. title: SearchAppBar(
  110. onSearch: onSearch,
  111. onChanged: onChanged,
  112. value: value,
  113. hintText: hintText,
  114. controller: controller,
  115. ),
  116. actions: actions,
  117. elevation: 0.0,
  118. bottom: PreferredSize(
  119. preferredSize: const Size.fromHeight(0.5),
  120. child: Divider(
  121. height: 0.5,
  122. indent: 0.0,
  123. color: ColorConstants.dividerBar,
  124. )),
  125. );
  126. }
  127. /// 当前App中的自定义TitleBar用于沉浸式处理,不是用在 Scaffold 下面的,直接放在 Column 下面即可
  128. static Widget titleBar(
  129. BuildContext context,
  130. String title, {
  131. void Function()? backCallback,
  132. String? backIconPath,
  133. double? backIconWidth,
  134. double? backIconHeight,
  135. String? subTitle,
  136. Color? subTitleColor,
  137. bool needBottomDivider = true,
  138. Color textColor = Colors.white,
  139. Color backgroundColor = Colors.transparent,
  140. List<Widget>? actions,
  141. }) {
  142. // 计算左侧和右侧固定容器的宽度
  143. double sideWidth = 55;
  144. return Column(
  145. children: [
  146. Container(
  147. height: kToolbarHeight,
  148. color: backgroundColor,
  149. child: Stack(
  150. children: [
  151. // 返回图标在左侧
  152. Positioned(
  153. left: 0,
  154. top: 0,
  155. bottom: 0,
  156. child: Container(
  157. width: sideWidth,
  158. alignment: Alignment.center,
  159. child: IconButton(
  160. icon: MyAssetImage(
  161. backIconPath ?? Assets.baseLibWhiteBack,
  162. width: backIconWidth ?? 11,
  163. height: backIconHeight ?? 18,
  164. ),
  165. onPressed: () {
  166. if (backCallback != null) {
  167. backCallback();
  168. } else {
  169. Get.back();
  170. }
  171. },
  172. ),
  173. ),
  174. ),
  175. // 标题在中间
  176. Positioned.fill(
  177. child: Center(
  178. child: ConstrainedBox(
  179. constraints: BoxConstraints(
  180. maxWidth: MediaQuery.of(context).size.width - 2 * sideWidth,
  181. ),
  182. child: subTitle == null
  183. ? Text(
  184. title,
  185. style: TextStyle(color: textColor, fontSize: 18, fontWeight: FontWeight.w500),
  186. overflow: TextOverflow.ellipsis,
  187. )
  188. : Column(
  189. mainAxisSize: MainAxisSize.min,
  190. mainAxisAlignment: MainAxisAlignment.center,
  191. crossAxisAlignment: CrossAxisAlignment.center,
  192. children: [
  193. Text(
  194. title,
  195. style: TextStyle(color: textColor, fontSize: 18, fontWeight: FontWeight.w500),
  196. overflow: TextOverflow.ellipsis,
  197. ),
  198. Text(
  199. subTitle!,
  200. style: TextStyle(color: subTitleColor ?? textColor, fontSize: 15, fontWeight: FontWeight.w400),
  201. ),
  202. ],
  203. ),
  204. ),
  205. ),
  206. ),
  207. // 右侧的操作按钮
  208. Positioned(
  209. right: 0,
  210. top: 0,
  211. bottom: 0,
  212. child: Container(
  213. alignment: Alignment.centerRight,
  214. child: Row(
  215. mainAxisSize: MainAxisSize.min,
  216. children: actions ?? [SizedBox(width: sideWidth)],
  217. ),
  218. ),
  219. ),
  220. ],
  221. ),
  222. ),
  223. // 底部的分割线
  224. if (needBottomDivider)
  225. Divider(
  226. height: 0.5,
  227. color: ColorConstants.dividerBar,
  228. ),
  229. ],
  230. );
  231. }
  232. /// 当前App中的自定义TitleBar用于沉浸式处理,不是用在 Scaffold 下面的,直接放在 Column 下面即可
  233. static Widget searchTitleBar(BuildContext context, {
  234. void Function()? backCallback,
  235. String? value,
  236. String? hintText,
  237. Color textColor = Colors.white,
  238. Color backgroundColor = Colors.transparent,
  239. ValueChanged<String>? onSearch,
  240. ValueChanged<String>? onChanged,
  241. bool needBottomDivider = true,
  242. TextEditingController? controller,
  243. List<Widget>? actions,
  244. }) {
  245. return Column(
  246. children: [
  247. Container(
  248. height: kToolbarHeight,
  249. color: backgroundColor,
  250. child: Row(
  251. crossAxisAlignment: CrossAxisAlignment.center,
  252. children: [
  253. // 返回图标
  254. Container(
  255. width: 55,
  256. alignment: Alignment.center,
  257. child: IconButton(
  258. icon: MyAssetImage(
  259. Assets.baseLibWhiteBack,
  260. width: 11,
  261. height: 18,
  262. ),
  263. onPressed: () {
  264. if (backCallback != null) {
  265. backCallback();
  266. } else {
  267. Get.back();
  268. }
  269. },
  270. ),
  271. ),
  272. // 搜索栏
  273. Expanded(
  274. child: SearchAppBar(
  275. onSearch: onSearch,
  276. onChanged: onChanged,
  277. value: value,
  278. hintText: hintText,
  279. controller: controller,
  280. ),
  281. ),
  282. // 右侧操作按钮
  283. Container(
  284. alignment: Alignment.centerRight,
  285. child: Row(
  286. mainAxisSize: MainAxisSize.min,
  287. children: actions ?? [],
  288. ),
  289. ),
  290. ],
  291. ),
  292. ),
  293. // 底部的分割线
  294. if (needBottomDivider)
  295. Divider(
  296. height: 0.5,
  297. indent: 0.0,
  298. color: ColorConstants.dividerBar,
  299. ),
  300. ],
  301. );
  302. }
  303. }