20.1 修改我的信息页面

20.1 修改我的信息页面

img

实现步骤：

第 1 步：i18n

lib/common/i18n/locale_keys.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 // 拍照、相册
 static const pickerTakeCamera = 'picker_take_camera';
 static const pickerSelectAlbum = 'picker_select_album';

// 个人信息修改
 static const profileEditTitle = "profile_edit_title";
 static const profileEditMyPhoto = "profile_edit_my_photo";
 static const profileEditFirstName = "profile_edit_first_name";
 static const profileEditLastName = "profile_edit_last_name";
 static const profileEditEmail = "profile_edit_email";
 static const profileEditOldPassword = "profile_edit_old_password";
 static const profileEditNewPassword = "profile_edit_new_password";
 static const profileEditConfirmPassword = "profile_edit_confirm_password";
 static const profileEditPasswordTip = "profile_edit_password_tip";

lib/common/i18n/locales/locale_en.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 // 拍照、相册
 LocaleKeys.pickerTakeCamera: 'Take camera',
 LocaleKeys.pickerSelectAlbum: 'Select from album',

// 个人信息修改
 LocaleKeys.profileEditTitle: 'Edit Profile',
 LocaleKeys.profileEditMyPhoto: 'My photo',
 LocaleKeys.profileEditFirstName: 'First name',
 LocaleKeys.profileEditLastName: 'Last name',
 LocaleKeys.profileEditEmail: 'Email',
 LocaleKeys.profileEditOldPassword: 'Old password',
 LocaleKeys.profileEditNewPassword: 'New password',
 LocaleKeys.profileEditConfirmPassword: 'Confirm password',
 LocaleKeys.profileEditPasswordTip: 'No input means no modification',

lib/common/i18n/locales/locale_zh.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 // 拍照、相册
 LocaleKeys.pickerTakeCamera: '拍照',
 LocaleKeys.pickerSelectAlbum: '从相册中选取',

// 个人信息修改
 LocaleKeys.profileEditTitle: '修改信息',
 LocaleKeys.profileEditMyPhoto: '头像',
 LocaleKeys.profileEditFirstName: '姓',
 LocaleKeys.profileEditLastName: '名',
 LocaleKeys.profileEditEmail: '邮件',
 LocaleKeys.profileEditOldPassword: '旧密码',
 LocaleKeys.profileEditNewPassword: '新密码',
 LocaleKeys.profileEditConfirmPassword: '确认密码',
 LocaleKeys.profileEditPasswordTip: '不输入表示不修改',

第 2 步：控制器

lib/pages/my/profile_edit/controller.dart

1
2
3
4
5
6
7
8
9
10
// 表单 form
GlobalKey formKey = GlobalKey<FormState>();

// 输入框控制器
TextEditingController firstNameController = TextEditingController();
TextEditingController lastNameController = TextEditingController();
TextEditingController emailController = TextEditingController();
TextEditingController oldPasswordController = TextEditingController();
TextEditingController newPasswordController = TextEditingController();
TextEditingController confirmNewPasswordController = TextEditingController();
1
2
3
4
5
6
7
8
9
10
11
 // 初始数据_
initData() {
   // 用户 profile
   UserProfileModel profile = UserService.to.profile;

   // 初始值
   firstNameController.text = profile.firstName ?? "";
   lastNameController.text = profile.lastName ?? "";
   emailController.text = profile.email ?? "";
   update(["profile_edit"]);
 }
1
2
3
4
5
6
7
8
9
10
@override
void onClose() {
  super.onClose();
  firstNameController.dispose();
  lastNameController.dispose();
  emailController.dispose();
  oldPasswordController.dispose();
  newPasswordController.dispose();
  confirmNewPasswordController.dispose();
}

第 3 步：视图

lib/pages/my/profile_edit/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 头像
Widget _buildAvatar() {
  return ListTileWidget(
    title: TextWidget.body1(LocaleKeys.profileEditMyPhoto.tr),
    trailing: [
      ImageWidget.url(
        // UserService.to.profile.avatarUrl,
        "https://ducafecat.oss-cn-beijing.aliyuncs.com/avatar/00258VC3ly1gty0r05zh2j60ut0u0tce02.jpg",
        width: 50.w,
        height: 50.w,
        fit: BoxFit.cover,
        radius: 25.w,
      ),
    ],
    padding: EdgeInsets.all(AppSpace.card),
  ).card().height(90.h).paddingBottom(AppSpace.card);
}
1
2
3
4
5
6
7
8
9
//  profile 表单
Widget _buildProfileForm() {
  return const Text("profile 表单");
}

//  password 表单
Widget _buildPasswordForm() {
  return const Text("password 表单");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 主视图
Widget _buildView() {
  return SingleChildScrollView(
    child: <Widget>[
      // 头像
      _buildAvatar(),

      // 表单
      Form(
        key: controller.formKey, //设置globalKey，用于后面获取FormState
        autovalidateMode: AutovalidateMode.onUserInteraction,
        child: <Widget>[
          // profile 表单
          _buildProfileForm(),
          // password 表单
          _buildPasswordForm(),
        ].toColumn(),
      ).paddingBottom(AppSpace.card),

      // 保存按钮
      ButtonWidget.primary(
        LocaleKeys.commonBottomSave.tr,
      ).paddingHorizontal(AppSpace.page),
    ].toColumn().padding(
          top: 45.h,
        ),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@override
Widget build(BuildContext context) {
  return GetBuilder<ProfileEditController>(
    init: ProfileEditController(),
    id: "profile_edit",
    builder: (_) {
      return Scaffold(
        appBar: mainAppBarWidget(titleString: LocaleKeys.profileEditTitle.tr),
        body: SafeArea(
          child: _buildView(),
        ),
      );
    },
  );
}

提交代码到 git