/ 编辑个人资资料界面 /
/ 编辑资料导航栏 /
ValueListenableBuilder通过 ValueListenableBuilder 实现局部刷新 , 当用户点击导航栏保存按钮时展现一个提交资料的进度 (网络请求) , 这时只会刷新导航栏的保存按钮 , 不会对整个界面进行刷新 .
Widget saveWidget(final PEditIntro _pEditIntro, final ValueNotifier<bool> _valueNotifierSave, final Map<String, String> _editIntroMap) { return ValueListenableBuilder<bool>( builder: (BuildContext context, bool value, Widget? child) { return value ? Container( width: 180.w, alignment: Alignment.center, child: CircularProgressIndicator( strokeWidth: 12.w, backgroundColor: Colors.blue, valueColor: const AlwaysStoppedAnimation<Color>(Colors.red), ), ) : child!; }, valueListenable: _valueNotifierSave, child: GestureDetector( onTap: () { _pEditIntro.editIntro(_editIntroMap); }, child: Container( width: 180.w, color: Colors.red.withOpacity(0.0), alignment: Alignment.center, child: Text( '保存', style: TextStyle(fontSize: 40.sp), ), ), )); }
AppBar( title: Text( "编辑资料", style: TextStyle(fontSize: 50.sp), ), centerTitle: true, backgroundColor: Colors.blue.withOpacity(0.8), elevation: 0.0, actions: [ saveWidget(_pEditIntro, _valueNotifierSave, _editIntroMap), ], ),
/ 上传个人头像 /
在 pubspec.yaml 配置 image_picker 依赖 (any用版本号代替也可以)
image_picker: any #选择手机图片
选择图片实现头像上传
edit_intro_page.dart
... onTap: () async { /// 隐藏软键盘 FocusScope.of(context).requestFocus(FocusNode()); final ImagePicker _picker = ImagePicker(); final XFile? image = await _picker.pickImage(source: ImageSource.gallery); String imagePath = image!.path; logV('上传头像地址:$imagePath'); _pEditIntro.uploadHead(imagePath); }, ...
m_edit_intro.dart
@override uploadHead(String file, SuccessCallback s, FailureCallback f) async { /// 获取要上传图片的名称 var _fileName = file.substring(file.lastIndexOf("/") + 1, file.length); MultipartFile _fromFile = await MultipartFile.fromFile( file, filename: _fileName, ); HttpManager().upLoad( url: '/upload/file', tag: tag, data: FormData.fromMap({ 'file': _fromFile, 'type': 'head', }), options: Options( contentType: "multipart/form-data", ), successCallback: (data) { s(data); }, errorCallback: (data) { f(data); }, ); }
http_manager.dart