profile_page.dart 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. import 'package:cached_network_image/cached_network_image.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter_screenutil/flutter_screenutil.dart';
  4. import 'package:get/get.dart';
  5. import 'package:keyboard/base/base_page.dart';
  6. import 'package:keyboard/data/bean/keyboard_info.dart';
  7. import 'package:keyboard/module/profile/profile_controller.dart';
  8. import 'package:keyboard/utils/intimacy_util.dart';
  9. import '../../resource/assets.gen.dart';
  10. import '../../router/app_pages.dart';
  11. import '../../utils/styles.dart';
  12. class ProfilePage extends BasePage<ProfileController> {
  13. const ProfilePage({super.key});
  14. static start() {
  15. Get.toNamed(RoutePath.profile);
  16. }
  17. @override
  18. Color backgroundColor() {
  19. return const Color(0xFFF6F5FA);
  20. }
  21. @override
  22. immersive() {
  23. return true;
  24. }
  25. @override
  26. Widget buildBody(BuildContext context) {
  27. return Stack(
  28. children: [
  29. SafeArea(
  30. child: CustomScrollView(
  31. physics: const BouncingScrollPhysics(), // 更流畅的滚动
  32. slivers: [
  33. SliverToBoxAdapter(
  34. child: Column(
  35. crossAxisAlignment: CrossAxisAlignment.start,
  36. children: [_buildTitle(), SizedBox(height: 26.h)],
  37. ),
  38. ),
  39. // 键盘列表
  40. Obx(() {
  41. if (controller.keyboardInfoList.isEmpty) {
  42. return const SliverToBoxAdapter(child: SizedBox());
  43. }
  44. return SliverList(
  45. delegate: SliverChildBuilderDelegate((context, index) {
  46. KeyboardInfo keyboardInfo =
  47. controller.keyboardInfoList[index];
  48. return Obx(() {
  49. return _buildKeyboardListItem(
  50. keyboardInfo,
  51. keyboardInfo.id ==
  52. controller.currentCustomKeyboardInfo.id,
  53. );
  54. });
  55. }, childCount: controller.keyboardInfoList.length),
  56. );
  57. }),
  58. ],
  59. ),
  60. ),
  61. // 背景图片
  62. IgnorePointer(child: Assets.images.bgMine.image(width: 360.w)),
  63. ],
  64. );
  65. }
  66. _buildKeyboardListItem(KeyboardInfo keyboardInfo, bool isChoose) {
  67. return GestureDetector(
  68. onTap: () {
  69. controller.clickOnChangeKeyboard(keyboardInfo);
  70. },
  71. child: Container(
  72. height: 164.h,
  73. margin: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 12.h),
  74. decoration:
  75. isChoose
  76. ? ShapeDecoration(
  77. gradient: LinearGradient(
  78. begin: Alignment(0.02, 0.04),
  79. end: Alignment(1.00, 1.00),
  80. colors: [const Color(0xFFE7A0FF), const Color(0xFFAB8FFA)],
  81. ),
  82. shape: RoundedRectangleBorder(
  83. borderRadius: BorderRadius.circular(22.r),
  84. ),
  85. shadows: [
  86. BoxShadow(
  87. color: Color(0x1CD6C1FF),
  88. blurRadius: 4.r,
  89. offset: Offset(0, 4.r),
  90. spreadRadius: 0,
  91. ),
  92. ],
  93. )
  94. : ShapeDecoration(
  95. color: Colors.white,
  96. shape: RoundedRectangleBorder(
  97. borderRadius: BorderRadius.circular(20.r),
  98. ),
  99. ),
  100. child: Stack(
  101. children: [
  102. isChoose
  103. ? Opacity(
  104. opacity: 0.1,
  105. child: Assets.images.bgProfileSelected.image(),
  106. )
  107. : SizedBox(),
  108. Column(
  109. crossAxisAlignment: CrossAxisAlignment.center,
  110. children: [
  111. Padding(
  112. padding: EdgeInsets.only(left: 16.w, right: 16.w, top: 10.h),
  113. child: Row(
  114. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  115. children: [
  116. Text(
  117. '我&${keyboardInfo.name}',
  118. style: TextStyle(
  119. color: const Color(0xFF202020),
  120. fontSize: 16.sp,
  121. fontWeight: FontWeight.w700,
  122. ),
  123. ),
  124. Container(
  125. height: 26.h,
  126. width: 55.w,
  127. decoration: ShapeDecoration(
  128. color:
  129. isChoose ? Colors.white : const Color(0xFFF1F1F1),
  130. shape: RoundedRectangleBorder(
  131. borderRadius: BorderRadius.circular(50.r),
  132. ),
  133. ),
  134. child: Row(
  135. mainAxisAlignment: MainAxisAlignment.center,
  136. children: [
  137. Assets.images.iconProfileEdit.image(
  138. width: 10.w,
  139. height: 10.w,
  140. ),
  141. SizedBox(width: 4.w),
  142. Text(
  143. '编辑',
  144. style: TextStyle(
  145. color: Colors.black.withAlpha(178),
  146. fontSize: 11,
  147. fontWeight: FontWeight.w500,
  148. ),
  149. ),
  150. ],
  151. ),
  152. ),
  153. ],
  154. ),
  155. ),
  156. SizedBox(height: 10.h),
  157. Padding(
  158. padding: EdgeInsets.symmetric(horizontal: 16.w),
  159. child: Divider(
  160. height: 1.h,
  161. color: isChoose ? Colors.transparent : Color(0xffF5F5F5),
  162. ),
  163. ),
  164. Expanded(
  165. child: Container(
  166. margin:
  167. isChoose
  168. ? EdgeInsets.only(
  169. left: 4.w,
  170. right: 4.w,
  171. bottom: 4.w,
  172. )
  173. : EdgeInsets.all(0),
  174. decoration: ShapeDecoration(
  175. color: Colors.white,
  176. shape: RoundedRectangleBorder(
  177. borderRadius: BorderRadius.circular(20.r),
  178. ),
  179. shadows: [
  180. BoxShadow(
  181. color: Color(0x1CD6C1FF),
  182. blurRadius: 4.r,
  183. offset: Offset(0, 4),
  184. spreadRadius: 0,
  185. ),
  186. ],
  187. ),
  188. child: Row(
  189. mainAxisAlignment: MainAxisAlignment.center,
  190. children: [
  191. Stack(
  192. children: [
  193. Container(
  194. width: 78.w,
  195. height: 78.w,
  196. decoration: ShapeDecoration(
  197. color:
  198. controller.userGender == 1
  199. ? Color(0xFFB7B6FF)
  200. : null,
  201. gradient:
  202. controller.userGender == 1
  203. ? null
  204. : LinearGradient(
  205. begin: Alignment(0.50, -0.00),
  206. end: Alignment(0.50, 1.00),
  207. colors: [
  208. const Color(0xFFEBE6FF),
  209. const Color(0xFFFFE6FE),
  210. ],
  211. ),
  212. shape: RoundedRectangleBorder(
  213. side: BorderSide(
  214. width: 1.5.w,
  215. color: Colors.white,
  216. ),
  217. borderRadius: BorderRadius.circular(40.r),
  218. ),
  219. ),
  220. child:
  221. controller.userInfo?.imageUrl?.isNotEmpty ==
  222. true
  223. ? ClipRRect(
  224. borderRadius: BorderRadius.circular(
  225. 40.r,
  226. ),
  227. child: CachedNetworkImage(
  228. width: 78.w,
  229. height: 78.w,
  230. imageUrl:
  231. controller.userInfo?.imageUrl ??
  232. "",
  233. ),
  234. )
  235. : SizedBox(),
  236. ),
  237. Positioned(
  238. top: 0,
  239. right: 0,
  240. child:
  241. controller.userGender == 1
  242. ? Assets.images.iconProfileMale.image(
  243. width: 20.w,
  244. height: 20.w,
  245. )
  246. : Assets.images.iconProfileFemale.image(
  247. width: 20.w,
  248. height: 20.w,
  249. ),
  250. ),
  251. ],
  252. ),
  253. SizedBox(width: 8.w),
  254. // 爱心
  255. Container(
  256. width: 87.w,
  257. height: 71.h,
  258. decoration: BoxDecoration(
  259. image: DecorationImage(
  260. image: Assets.images.bgProfileLove.provider(),
  261. ),
  262. ),
  263. child: Column(
  264. children: [
  265. SizedBox(height: 45.h),
  266. Container(
  267. width: 47.w,
  268. height: 19.h,
  269. decoration: ShapeDecoration(
  270. color: Colors.white,
  271. shape: RoundedRectangleBorder(
  272. side: BorderSide(
  273. width: 1.18.w,
  274. color: const Color(0xFFFD649B),
  275. ),
  276. borderRadius: BorderRadius.circular(
  277. 12.36.r,
  278. ),
  279. ),
  280. ),
  281. child:
  282. (keyboardInfo.intimacy != null)
  283. ? Center(
  284. child: Text(
  285. IntimacyUtil.getIntimacyName(
  286. keyboardInfo.intimacy!,
  287. ),
  288. style: TextStyle(
  289. color: const Color(0xFFFF73E0),
  290. fontSize: 11.sp,
  291. fontWeight: FontWeight.w500,
  292. ),
  293. ),
  294. )
  295. : SizedBox(),
  296. ),
  297. ],
  298. ),
  299. ),
  300. SizedBox(width: 8.w),
  301. keyboardInfo.avatar?.isNotEmpty == true
  302. ? Stack(
  303. children: [
  304. Container(
  305. width: 78.w,
  306. height: 78.w,
  307. decoration: ShapeDecoration(
  308. color:
  309. keyboardInfo.gender == 1
  310. ? Color(0xFFB7B6FF)
  311. : null,
  312. gradient:
  313. keyboardInfo.gender == 1
  314. ? null
  315. : LinearGradient(
  316. begin: Alignment(0.50, -0.00),
  317. end: Alignment(0.50, 1.00),
  318. colors: [
  319. const Color(0xFFEBE6FF),
  320. const Color(0xFFFFE6FE),
  321. ],
  322. ),
  323. shape: RoundedRectangleBorder(
  324. side: BorderSide(
  325. width: 1.5.w,
  326. color: Colors.white,
  327. ),
  328. borderRadius: BorderRadius.circular(40.r),
  329. ),
  330. ),
  331. child: ClipRRect(
  332. borderRadius: BorderRadius.circular(40.r),
  333. child: CachedNetworkImage(
  334. imageUrl: keyboardInfo.avatar!,
  335. ),
  336. ),
  337. ),
  338. Positioned(
  339. top: 0,
  340. left: 0,
  341. child:
  342. keyboardInfo.gender == 1
  343. ? Assets.images.iconProfileMale.image(
  344. width: 20.w,
  345. height: 20.w,
  346. )
  347. : Assets.images.iconProfileFemale
  348. .image(width: 20.w, height: 20.w),
  349. ),
  350. ],
  351. )
  352. : SizedBox(width: 78.w, height: 78.w),
  353. ],
  354. ),
  355. ),
  356. ),
  357. ],
  358. ),
  359. ],
  360. ),
  361. ),
  362. );
  363. }
  364. _buildTitle() {
  365. return Container(
  366. alignment: Alignment.centerLeft,
  367. padding: EdgeInsets.only(top: 12.h, left: 16.w, right: 16.w),
  368. child: Row(
  369. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  370. children: [
  371. GestureDetector(
  372. onTap: controller.clickBack,
  373. child: Assets.images.iconMineBackArrow.image(
  374. width: 24.w,
  375. height: 24.w,
  376. ),
  377. ),
  378. Text("我", style: Styles.getTextStyleBlack204W500(17.sp)),
  379. SizedBox(),
  380. GestureDetector(
  381. onTap: controller.clickAddButton,
  382. child: Assets.images.iconProfileAdd.image(
  383. width: 24.w,
  384. height: 24.w,
  385. ),
  386. ),
  387. ],
  388. ),
  389. );
  390. }
  391. }