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

profile_screen.dart 14KB

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