这是CaiYouHui前端,一个关于flutter的安卓app,前端使用flutter实现

profile_screen.dart 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  3. import '../../../core/constants/route_constants.dart';
  4. import '../../providers/auth_provider.dart';
  5. import '../../navigation/bottom_nav_bar.dart';
  6. import '../../widgets/common/app_button.dart';
  7. import 'profile_about_screen.dart';
  8. import 'profile_detail_screen.dart';
  9. import 'profile_help_screen.dart';
  10. import 'profile_modify_password_screen.dart';
  11. class ProfileScreen extends StatelessWidget {
  12. const ProfileScreen({super.key});
  13. @override
  14. Widget build(BuildContext context) {
  15. // 直接显示内容,认证由路由层处理
  16. return _ProfileContent();
  17. }
  18. }
  19. class _ProfileContent extends StatefulWidget {
  20. @override
  21. State<_ProfileContent> createState() => _ProfileContentState();
  22. }
  23. class _ProfileContentState extends State<_ProfileContent> {
  24. // @override
  25. // void initState() {
  26. // super.initState();
  27. // WidgetsBinding.instance.addPostFrameCallback((_) {
  28. // final userProvider = Provider.of<UserProvider>(context, listen: false);
  29. // userProvider.loadUserProfile();
  30. // });
  31. // }
  32. @override
  33. Widget build(BuildContext context) {
  34. final authProvider = Provider.of<AuthProvider>(context);
  35. return Scaffold(
  36. appBar: AppBar(
  37. title: const Text('我的'),
  38. actions: [
  39. IconButton(
  40. icon: const Icon(Icons.settings_outlined),
  41. onPressed: () {
  42. // 跳转到设置页面
  43. },
  44. ),
  45. ],
  46. ),
  47. body: SingleChildScrollView(
  48. child: Column(
  49. children: [
  50. if (!authProvider.isAuthenticated) ...[
  51. // 欢迎区域
  52. Card(
  53. margin: const EdgeInsets.all(16),
  54. shape: RoundedRectangleBorder(
  55. borderRadius: BorderRadius.circular(16),
  56. ),
  57. // color: Colors.blue[50],
  58. elevation: 2,
  59. child: Padding(
  60. padding: const EdgeInsets.all(20),
  61. child: Column(
  62. crossAxisAlignment: CrossAxisAlignment.start,
  63. children: [
  64. Row(
  65. children: [
  66. CircleAvatar(
  67. radius: 30,
  68. backgroundColor: Colors.blue[100],
  69. child: Icon(
  70. Icons.person,
  71. size: 30,
  72. color: Colors.blue,
  73. ),
  74. ),
  75. const SizedBox(width: 16),
  76. Expanded(
  77. child: Column(
  78. crossAxisAlignment: CrossAxisAlignment.start,
  79. children: [
  80. Text(
  81. authProvider.isAuthenticated
  82. ? '您好,${authProvider.user?.fullName}'
  83. : '您好,游客',
  84. style: const TextStyle(
  85. fontSize: 18,
  86. fontWeight: FontWeight.bold,
  87. ),
  88. ),
  89. const SizedBox(height: 4),
  90. Text(
  91. authProvider.isAuthenticated
  92. ? '欢迎回来!'
  93. : '请登录以使用完整功能',
  94. style: TextStyle(
  95. fontSize: 14,
  96. color: Colors.grey[600],
  97. ),
  98. ),
  99. ],
  100. ),
  101. ),
  102. ],
  103. ),
  104. const SizedBox(height: 20),
  105. if (!authProvider.isAuthenticated)
  106. AppButton(
  107. text: '立即登录',
  108. onPressed: () {
  109. Navigator.of(context).pushNamed('/login');
  110. },
  111. backgroundColor: Colors.blue,
  112. height: 45,
  113. ),
  114. ],
  115. ),
  116. ),
  117. ),
  118. ] else ...[
  119. // 用户信息卡片
  120. Card(
  121. margin: const EdgeInsets.all(16),
  122. shape: RoundedRectangleBorder(
  123. borderRadius: BorderRadius.circular(16),
  124. ),
  125. // color: Colors.blue[50],
  126. elevation: 2,
  127. child: Padding(
  128. padding: const EdgeInsets.all(20),
  129. child: Column(
  130. children: [
  131. GestureDetector(
  132. onTap: () {
  133. // 点击头像
  134. },
  135. child: Stack(
  136. children: [
  137. CircleAvatar(
  138. radius: 50,
  139. backgroundColor: Colors.blue[100],
  140. backgroundImage: authProvider.user?.avatar != null
  141. ? NetworkImage(authProvider.user!.avatar!)
  142. : null,
  143. child: authProvider.user?.avatar == null
  144. ? const Icon(
  145. Icons.person,
  146. size: 60,
  147. color: Colors.blue,
  148. )
  149. : null,
  150. ),
  151. Positioned(
  152. bottom: 0,
  153. right: 0,
  154. child: Container(
  155. padding: const EdgeInsets.all(6),
  156. decoration: BoxDecoration(
  157. color: Colors.blue,
  158. borderRadius: BorderRadius.circular(20),
  159. border: Border.all(
  160. color: Colors.white,
  161. width: 2,
  162. ),
  163. ),
  164. ),
  165. ),
  166. ],
  167. ),
  168. ),
  169. const SizedBox(height: 16),
  170. Text(
  171. authProvider.user?.fullName ?? '用户',
  172. style: const TextStyle(
  173. fontSize: 22,
  174. fontWeight: FontWeight.bold,
  175. ),
  176. ),
  177. const SizedBox(height: 8),
  178. Text(
  179. authProvider.user?.email ?? '',
  180. style: TextStyle(
  181. fontSize: 14,
  182. color: Colors.grey[600],
  183. ),
  184. ),
  185. if (authProvider.user?.phone != null)
  186. Padding(
  187. padding: const EdgeInsets.only(top: 4),
  188. child: Text(
  189. authProvider.user!.phone!,
  190. style: TextStyle(
  191. fontSize: 14,
  192. color: Colors.grey[600],
  193. ),
  194. ),
  195. ),
  196. const SizedBox(height: 16),
  197. Row(
  198. mainAxisAlignment: MainAxisAlignment.center,
  199. children: [
  200. _buildStatItem('关注', '0'),
  201. _buildVerticalDivider(),
  202. _buildStatItem('粉丝', '0'),
  203. _buildVerticalDivider(),
  204. _buildStatItem('积分', '0'),
  205. ],
  206. ),
  207. ],
  208. ),
  209. ),
  210. ),
  211. ],
  212. // 菜单项
  213. Padding(
  214. padding: const EdgeInsets.symmetric(horizontal: 16),
  215. child: Column(
  216. children: [
  217. if (authProvider.isAuthenticated) ... [
  218. _buildMenuCard(
  219. title: '账户设置',
  220. items: [
  221. _buildMenuItem(
  222. icon: Icons.person_outline,
  223. title: '个人信息',
  224. subtitle: '查看和编辑个人信息',
  225. onTap: () {
  226. Navigator.of(context).push(
  227. MaterialPageRoute(
  228. builder: (_) => const ProfileDetailScreen(),
  229. ),
  230. );
  231. },
  232. ),
  233. _buildMenuItem(
  234. icon: Icons.lock_outline,
  235. title: '账号安全',
  236. subtitle: '修改密码',
  237. onTap: () {
  238. Navigator.of(context).push(
  239. MaterialPageRoute(
  240. builder: (_) => const ChangePasswordScreen(),
  241. ),
  242. );
  243. },
  244. ),
  245. _buildMenuItem(
  246. icon: Icons.notifications_none,
  247. title: '消息通知',
  248. subtitle: '管理通知偏好设置',
  249. onTap: () {},
  250. ),
  251. ],
  252. ),
  253. const SizedBox(height: 16),
  254. _buildMenuCard(
  255. title: '我的内容',
  256. items: [
  257. _buildMenuItem(
  258. icon: Icons.bookmark_border,
  259. title: '我的收藏',
  260. subtitle: '查看收藏的内容',
  261. onTap: () {},
  262. ),
  263. _buildMenuItem(
  264. icon: Icons.history,
  265. title: '浏览历史',
  266. subtitle: '查看最近浏览记录',
  267. onTap: () {},
  268. ),
  269. _buildMenuItem(
  270. icon: Icons.download,
  271. title: '我的下载',
  272. subtitle: '管理下载的文件',
  273. onTap: () {},
  274. ),
  275. ],
  276. ),
  277. const SizedBox(height: 16),
  278. ],
  279. _buildMenuCard(
  280. title: '其他',
  281. items: [
  282. _buildMenuItem(
  283. icon: Icons.help_outline,
  284. title: '帮助中心',
  285. subtitle: '常见问题和帮助文档',
  286. onTap: () {
  287. Navigator.of(context).push(
  288. MaterialPageRoute(
  289. builder: (_) => const HelpCenterScreen(),
  290. ),
  291. );
  292. },
  293. ),
  294. _buildMenuItem(
  295. icon: Icons.info_outline,
  296. title: '关于我们',
  297. subtitle: '了解应用信息',
  298. onTap: () {
  299. Navigator.of(context).push(
  300. MaterialPageRoute(
  301. builder: (_) => const AboutUsScreen(),
  302. ),
  303. );
  304. },
  305. ),
  306. if (authProvider.isAuthenticated) ... [
  307. _buildMenuItem(
  308. icon: Icons.logout,
  309. title: '退出登录',
  310. subtitle: '安全退出当前账号',
  311. onTap: () async {
  312. // 防止重复点击
  313. if (authProvider.isLoading) return;
  314. final shouldLogout = await showDialog<bool>(
  315. context: context,
  316. builder: (context) {
  317. final isIOS = Theme.of(context).platform == TargetPlatform.iOS;
  318. if (isIOS) {
  319. // iOS风格:确定在右边,取消在左边
  320. return AlertDialog(
  321. title: const Text('确认退出'),
  322. content: const Text('确定要退出登录吗?'),
  323. actionsAlignment: MainAxisAlignment.spaceBetween,
  324. actions: [
  325. TextButton(
  326. onPressed: () => Navigator.of(context).pop(true),
  327. child: const Text('确定'),
  328. ),
  329. TextButton(
  330. onPressed: () => Navigator.of(context).pop(false),
  331. child: const Text('取消'),
  332. ),
  333. ],
  334. );
  335. } else {
  336. // Android/Material风格:取消在左边,确定在右边
  337. return AlertDialog(
  338. title: const Text('确认退出'),
  339. content: const Text('确定要退出登录吗?'),
  340. actionsAlignment: MainAxisAlignment.spaceBetween,
  341. actions: [
  342. TextButton(
  343. onPressed: () => Navigator.of(context).pop(false),
  344. child: const Text('取消'),
  345. ),
  346. TextButton(
  347. onPressed: () => Navigator.of(context).pop(true),
  348. child: const Text('确定'),
  349. ),
  350. ],
  351. );
  352. }
  353. },
  354. );
  355. if (shouldLogout == true) {
  356. await authProvider.logout();
  357. // 登出后,确保在组件仍然存在时进行导航
  358. if (mounted) {
  359. // 使用pushReplacementNamed清空导航栈
  360. Navigator.of(context).pushReplacementNamed(RouteConstants.home);
  361. }
  362. }
  363. },
  364. ),
  365. ],
  366. ],
  367. ),
  368. const SizedBox(height: 20),
  369. // 版本信息
  370. Padding(
  371. padding: const EdgeInsets.symmetric(vertical: 20),
  372. child: Text(
  373. '版本 v1.0.0',
  374. style: TextStyle(
  375. fontSize: 12,
  376. color: Colors.grey[500],
  377. ),
  378. ),
  379. ),
  380. ],
  381. ),
  382. ),
  383. ],
  384. ),
  385. ),
  386. bottomNavigationBar: const BottomNavBar(initialIndex: 3),
  387. );
  388. }
  389. Widget _buildStatItem(String label, String value) {
  390. return Expanded(
  391. child: Column(
  392. children: [
  393. Text(
  394. value,
  395. style: const TextStyle(
  396. fontSize: 18,
  397. fontWeight: FontWeight.bold,
  398. ),
  399. ),
  400. const SizedBox(height: 4),
  401. Text(
  402. label,
  403. style: TextStyle(
  404. fontSize: 12,
  405. color: Colors.grey[600],
  406. ),
  407. ),
  408. ],
  409. ),
  410. );
  411. }
  412. Widget _buildVerticalDivider() {
  413. return Container(
  414. width: 1,
  415. height: 40,
  416. color: Colors.grey[300],
  417. margin: const EdgeInsets.symmetric(horizontal: 16),
  418. );
  419. }
  420. Widget _buildMenuCard({
  421. required String title,
  422. required List<Widget> items,
  423. }) {
  424. return Card(
  425. elevation: 2,
  426. shape: RoundedRectangleBorder(
  427. borderRadius: BorderRadius.circular(12),
  428. ),
  429. child: Padding(
  430. padding: const EdgeInsets.all(16),
  431. child: Column(
  432. crossAxisAlignment: CrossAxisAlignment.start,
  433. children: [
  434. Text(
  435. title,
  436. style: const TextStyle(
  437. fontSize: 16,
  438. fontWeight: FontWeight.bold,
  439. ),
  440. ),
  441. const SizedBox(height: 12),
  442. Column(children: items),
  443. ],
  444. ),
  445. ),
  446. );
  447. }
  448. Widget _buildMenuItem({
  449. required IconData icon,
  450. required String title,
  451. required String subtitle,
  452. required VoidCallback onTap,
  453. }) {
  454. return ListTile(
  455. contentPadding: EdgeInsets.zero,
  456. leading: Icon(icon),
  457. title: Text(title),
  458. subtitle: Text(subtitle),
  459. trailing: const Icon(Icons.chevron_right),
  460. onTap: onTap,
  461. );
  462. }
  463. }