comf

lib/pages/userInfo/index.dart

@@ -8,24 +8,24 @@ import 'package:worker_client/services/user.dart';
 import 'package:worker_client/widgets/MyButton/index.dart';
 import 'package:worker_client/widgets/layout/BasicPage.dart';
 
-class UserInfo extends BasicPage {
-  UserInfo({Key? key}) : super(key: key);
+class UserInfo extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _UserInfoState();
+  }
+}
+
+class _UserInfoState extends BoardWidget {
+  late TextEditingController _cName =
+      TextEditingController(text: store.user().nickName.toString());
+  late TextEditingController _cPhone =
+      TextEditingController(text: store.user().phone.toString());
+  late String name = store.user().nickName.toString();
+  late String phone = store.user().phone.toString();
+  final bool _useSystemKeyBoard = true;
 
   AppController store = AppController.t;
-  late String name;
-  late String phone;
-  late TextEditingController _cName;
-  late TextEditingController _cPhone;
 
-  @override
-  void beforeShow() {
-    // TODO: implement beforeShow
-    super.beforeShow();
-    _cName = TextEditingController(text: store.user().nickName.toString());
-    _cPhone = TextEditingController(text: store.user().phone.toString());
-    name = store.user().nickName.toString();
-    phone = store.user().phone.toString();
-  }
   RegExp exp = RegExp(r'^1[3456789]\d{9}$');
 
   void handleOk() {
@@ -36,7 +36,6 @@ class UserInfo extends BasicPage {
       Fluttertoast.showToast(msg: '请输入正确的手机号');
       return;
     } else {
-
       updateInfo(store.user().personId.toString(), {
         ...store.user().toJson(),
         'nickName': name,
@@ -49,214 +48,350 @@ class UserInfo extends BasicPage {
     }
   }
 
+  final TextStyle textStyle = TextStyle(
+      fontFamily: "hwxw",
+      fontSize: 20.0,
+      letterSpacing: 1.0,
+      fontWeight: FontWeight.bold,
+      fontStyle: FontStyle.normal,
+      color: Colors.black87);
+
+  final TextStyle lableStyle = TextStyle(
+      fontFamily: "hwxw",
+      fontSize: 20.0,
+      letterSpacing: 16.0,
+      fontWeight: FontWeight.bold,
+      fontStyle: FontStyle.normal);
+
+  final TextStyle helperStyle = TextStyle(
+      fontFamily: "hwxw", fontSize: 12.0, fontStyle: FontStyle.normal);
+
+  late ScrollFocusNode _userNameFocusNode;
+  late ScrollFocusNode _phoneFocusNode;
+
   @override
-  Widget builder(BuildContext context) {
-    naviTitle = '个人信息';
-    return Container(
-      padding: EdgeInsets.all(15.w),
-      decoration: const BoxDecoration(color: Colors.white),
-      child: Column(
-        children: [
-          Container(
-            width: 345.w,
-            height: 92.h,
-            alignment: Alignment.centerLeft,
-            decoration: BoxDecoration(color: Colors.white, boxShadow: [
-              BoxShadow(color: Color(0x1f000000), offset: Offset(0, 1.w))
-            ]),
-            child: store.user().avatar != null
-                ? Container(
-                    clipBehavior: Clip.hardEdge,
-                    decoration: BoxDecoration(
-                        borderRadius: BorderRadius.all(Radius.circular(31.w))),
-                    child: Image.network(
-                      store.user().avatar.toString(),
+  void initState() {
+    super.initState();
+    _userNameFocusNode =
+        ScrollFocusNode(_useSystemKeyBoard, 50.0); // 第二个参数是向上滚动的距离
+    _phoneFocusNode =
+        ScrollFocusNode(_useSystemKeyBoard, 120.0); // 第二个参数是向上滚动的距离
+  }
+
+  @override
+  List<Widget> initChild() {
+    return <Widget>[
+      Container(
+        padding: EdgeInsets.all(15.w),
+        decoration: const BoxDecoration(color: Colors.white),
+        child: Column(
+          children: [
+            Container(
+              width: 345.w,
+              height: 92.h,
+              alignment: Alignment.centerLeft,
+              decoration: BoxDecoration(color: Colors.white, boxShadow: [
+                BoxShadow(color: Color(0x1f000000), offset: Offset(0, 1.w))
+              ]),
+              child: store.user().avatar != null
+                  ? Container(
+                      clipBehavior: Clip.hardEdge,
+                      decoration: BoxDecoration(
+                          borderRadius:
+                              BorderRadius.all(Radius.circular(31.w))),
+                      child: Image.network(
+                        store.user().avatar.toString(),
+                        width: 62.w,
+                        height: 62.w,
+                      ),
+                    )
+                  : Image.asset(
+                      'images/main/defaultAvatar.png',
                       width: 62.w,
                       height: 62.w,
                     ),
-                  )
-                : Image.asset(
-                    'images/main/defaultAvatar.png',
-                    width: 62.w,
-                    height: 62.w,
-                  ),
-          ),
-          Container(
+            ),
+            Container(
+                width: 345.w,
+                alignment: Alignment.centerLeft,
+                margin: EdgeInsets.only(top: 40.h),
+                decoration: BoxDecoration(color: Colors.white, boxShadow: [
+                  BoxShadow(color: Color(0x1f000000), offset: Offset(0, 1.w))
+                ]),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      '用户名：',
+                      style: TextStyle(
+                          color: const Color(0xFF333333),
+                          letterSpacing: 2,
+                          fontSize: 17.sp,
+                          fontWeight: FontWeight.bold),
+                    ),
+                    Container(
+                      height: 54.h,
+                      alignment: Alignment.centerLeft,
+                      child: store.user().userName != null
+                          ? Text(
+                              store.user().userName.toString(),
+                              style: TextStyle(
+                                  color: const Color(0xFF333333),
+                                  fontSize: 17.sp,
+                                  fontWeight: FontWeight.bold),
+                            )
+                          : const Text(''),
+                    ),
+                  ],
+                )),
+            Container(
               width: 345.w,
               alignment: Alignment.centerLeft,
               margin: EdgeInsets.only(top: 40.h),
               decoration: BoxDecoration(color: Colors.white, boxShadow: [
-                BoxShadow(color: Color(0x1f000000), offset: Offset(0, 1.w))
+                BoxShadow(
+                    color: const Color(0x1f000000), offset: Offset(0, 1.w))
               ]),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Text(
-                    '用户名：',
+                    '姓名：',
                     style: TextStyle(
                         color: const Color(0xFF333333),
-                        letterSpacing: 2,
                         fontSize: 17.sp,
-                        fontWeight: FontWeight.bold),
+                        fontWeight: FontWeight.bold,
+                        letterSpacing: 2),
                   ),
                   Container(
                     height: 54.h,
                     alignment: Alignment.centerLeft,
-                    child: store.user().userName != null
-                        ? Text(
-                            store.user().userName.toString(),
+                    child: Row(
+                      children: [
+                        Expanded(
+                          flex: 1,
+                          child: TextField(
+                            controller: _cName,
                             style: TextStyle(
-                                color: const Color(0xFF333333),
                                 fontSize: 17.sp,
-                                fontWeight: FontWeight.bold),
-                          )
-                        : const Text(''),
-                  ),
-                ],
-              )),
-          Container(
-            width: 345.w,
-            alignment: Alignment.centerLeft,
-            margin: EdgeInsets.only(top: 40.h),
-            decoration: BoxDecoration(color: Colors.white, boxShadow: [
-              BoxShadow(color: const Color(0x1f000000), offset: Offset(0, 1.w))
-            ]),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  '姓名：',
-                  style: TextStyle(
-                      color: const Color(0xFF333333),
-                      fontSize: 17.sp,
-                      fontWeight: FontWeight.bold,
-                      letterSpacing: 2),
-                ),
-                Container(
-                  height: 54.h,
-                  alignment: Alignment.centerLeft,
-                  child: Row(
-                    children: [
-                      Expanded(
-                        flex: 1,
-                        child: TextField(
-                          controller: _cName,
-                          style: TextStyle(
-                              fontSize: 17.sp,
-                              fontWeight: FontWeight.bold,
-                              color: const Color(0xff333333)),
-                          decoration: const InputDecoration(
-                            isCollapsed: true,
-                            hintText: '请输入您的姓名',
-                            counterText: '', //去掉右下角的东西
-                            border: InputBorder.none,
-                            floatingLabelBehavior: FloatingLabelBehavior.never,
+                                fontWeight: FontWeight.bold,
+                                color: const Color(0xff333333)),
+                            decoration: const InputDecoration(
+                              isCollapsed: true,
+                              hintText: '请输入您的姓名',
+                              counterText: '', //去掉右下角的东西
+                              border: InputBorder.none,
+                              floatingLabelBehavior:
+                                  FloatingLabelBehavior.never,
+                            ),
+                            onChanged: (val) {
+                              name = val;
+                            },
+                            onTap: (){
+                              bindNewInputer(_userNameFocusNode);
+
+                            },
                           ),
-                          onChanged: (val) {
-                            name = val;
-                          },
                         ),
-                      ),
-                      GestureDetector(
-                        behavior: HitTestBehavior.opaque,
-                        onTap: () {
-                          name = '';
-                          _cName.clear();
-                        },
-                        child: Container(
-                          width: 50.w,
-                          alignment: Alignment.center,
-                          child: Image.asset(
-                            'images/main/cancel.png',
-                            width: 18.w,
+                        GestureDetector(
+                          behavior: HitTestBehavior.opaque,
+                          onTap: () {
+                            name = '';
+                            _cName.clear();
+                          },
+                          child: Container(
+                            width: 50.w,
+                            alignment: Alignment.center,
+                            child: Image.asset(
+                              'images/main/cancel.png',
+                              width: 18.w,
+                            ),
                           ),
-                        ),
-                      )
-                    ],
+                        )
+                      ],
+                    ),
                   ),
-                ),
-              ],
+                ],
+              ),
             ),
-          ),
-          Container(
-            width: 345.w,
-            alignment: Alignment.centerLeft,
-            margin: EdgeInsets.only(top: 40.h),
-            decoration: BoxDecoration(color: Colors.white, boxShadow: [
-              BoxShadow(color: Color(0x1f000000), offset: Offset(0, 1.w))
-            ]),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  '手机号：',
-                  style: TextStyle(
-                      color: const Color(0xFF333333),
-                      letterSpacing: 2,
-                      fontSize: 17.sp,
-                      fontWeight: FontWeight.bold),
-                ),
-                Container(
-                  height: 54.h,
-                  alignment: Alignment.centerLeft,
-                  child: Row(
-                    children: [
-                      Expanded(
-                        flex: 1,
-                        child: TextField(
-                          //赋初值
-                          controller: _cPhone,
-                          maxLength: 11,
-                          keyboardType: TextInputType.number,
-                          style: TextStyle(
-                              fontSize: 17.sp,
-                              fontWeight: FontWeight.bold,
-                              color: const Color(0xff333333)),
-                          decoration: const InputDecoration(
-                            isCollapsed: true,
-                            hintText: '请输入您的手机号',
-                            counterText: '', //去掉右下角的东西
-                            border: InputBorder.none,
-                            floatingLabelBehavior: FloatingLabelBehavior.never,
+            Container(
+              width: 345.w,
+              alignment: Alignment.centerLeft,
+              margin: EdgeInsets.only(top: 40.h),
+              decoration: BoxDecoration(color: Colors.white, boxShadow: [
+                BoxShadow(color: Color(0x1f000000), offset: Offset(0, 1.w))
+              ]),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    '手机号：',
+                    style: TextStyle(
+                        color: const Color(0xFF333333),
+                        letterSpacing: 2,
+                        fontSize: 17.sp,
+                        fontWeight: FontWeight.bold),
+                  ),
+                  Container(
+                    height: 54.h,
+                    alignment: Alignment.centerLeft,
+                    child: Row(
+                      children: [
+                        Expanded(
+                          flex: 1,
+                          child: TextField(
+                            //赋初值
+                            controller: _cPhone,
+                            maxLength: 11,
+                            keyboardType: TextInputType.number,
+                            style: TextStyle(
+                                fontSize: 17.sp,
+                                fontWeight: FontWeight.bold,
+                                color: const Color(0xff333333)),
+                            decoration: const InputDecoration(
+                              isCollapsed: true,
+                              hintText: '请输入您的手机号',
+                              counterText: '', //去掉右下角的东西
+                              border: InputBorder.none,
+                              floatingLabelBehavior:
+                                  FloatingLabelBehavior.never,
+                            ),
+                            onChanged: (val) {
+                              phone = val;
+                            },
+                            onTap: () {
+                              // 点击时绑定当前focusNode
+                              bindNewInputer(_phoneFocusNode);
+                            },
                           ),
-                          onChanged: (val) {
-                            phone = val;
-                          },
                         ),
-                      ),
-                      GestureDetector(
-                        behavior: HitTestBehavior.opaque,
-                        onTap: () {
-                          phone = '';
-                          _cPhone.clear();
-                        },
-                        child: Container(
-                          width: 50.w,
-                          alignment: Alignment.center,
-                          child: Image.asset(
-                            'images/main/cancel.png',
-                            width: 18.w,
+                        GestureDetector(
+                          behavior: HitTestBehavior.opaque,
+                          onTap: () {
+                            phone = '';
+                            _cPhone.clear();
+                          },
+                          child: Container(
+                            width: 50.w,
+                            alignment: Alignment.center,
+                            child: Image.asset(
+                              'images/main/cancel.png',
+                              width: 18.w,
+                            ),
                           ),
                         ),
-                      ),
-                    ],
+                      ],
+                    ),
                   ),
-                ),
-              ],
+                ],
+              ),
             ),
-          ),
+            MyButton(
+                text: '保存',
+                type: 0,
+                pwith: 30.w,
+                disable: false,
+                onClick: () {
+                  handleOk();
+                })
+          ],
+        ),
+      ),
+    ];
+  }
+}
+
+
+class ScrollFocusNode extends FocusNode {
+  final bool _useSystemKeyBoard; // 是否使用系统键盘
+  final double _moveValue; // 上移距离
+
+  ScrollFocusNode(this._useSystemKeyBoard, this._moveValue);
+
+  @override
+  bool consumeKeyboardToken() {
+    if (_useSystemKeyBoard) {
+      return super.consumeKeyboardToken();
+    }
+    return false;
+  }
+
+  double get moveValue => _moveValue;
 
-          const Spacer(),
-          MyButton(
-              text: '保存',
-              type: 0,
-              pwith: 30.w,
-              disable: false,
-              onClick: () {
-                handleOk();
-              })
-        ],
+  bool get useSystemKeyBoard => _useSystemKeyBoard;
+}
+
+abstract class BoardWidget extends State<StatefulWidget>
+    with WidgetsBindingObserver {
+  final ScrollController _controller = ScrollController();
+
+  late ScrollFocusNode _focusNode;
+
+  double _currentPosition = 0.0;
+
+  List<Widget> initChild();
+
+  void bindNewInputer(ScrollFocusNode focusNode) {
+    _focusNode = focusNode;
+    _animateUp();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance?.addObserver(this);
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.dispose();
+    WidgetsBinding.instance?.removeObserver(this);
+  }
+
+  //  向上滚动
+  void _animateUp() {
+    _controller
+        .animateTo(_focusNode.moveValue,
+            duration: Duration(milliseconds: 250), curve: Curves.easeOut)
+        .then((Null) {
+      _currentPosition = _controller.offset;
+    });
+  }
+
+  //  向下滚动
+  void _animateDown() {
+    _controller
+        .animateTo(0.0,
+            duration: Duration(milliseconds: 250), curve: Curves.easeOut)
+        .then((Null) {
+      _currentPosition = 0.0;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('个人信息'),
+      ),
+      backgroundColor: Colors.white,
+      body: SingleChildScrollView(
+        controller: _controller,
+        physics: NeverScrollableScrollPhysics(),
+        child: Column(
+          children: initChild()..add(SizedBox(height: 400.0)),
+        ),
       ),
     );
   }
+
+  //  使用系统键盘 ---> 矩阵变换 ---> 返回原位置
+  @override
+  void didChangeMetrics() {
+    if (_currentPosition != 0.0) {
+      _focusNode.unfocus(); // 如果不加，收起键盘再点击会默认键盘还在。
+      _animateDown();
+    }
+  }
 }

lib/widgets/layout/BasicPage.dart

@@ -103,11 +103,11 @@ class _BasicPageState extends State<BasicPage> {
   Widget build(BuildContext context) {
 
     return Scaffold(
-
       resizeToAvoidBottomInset: false,
       appBar: _getAppBar(),
       body: SafeArea(
         child: widget.builder(context),
+
       ),
       bottomNavigationBar: widget.tabIndex == null ? null : BottomBar(list: BarList, current: widget.tabIndex!),
     );