题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力
Flutter是谷歌推出的最新的移动开发框架。
【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注
本文章实现Demo运行效果 如下:
1Demo 实现开始如下
首先是来构建页面的主体,
class HomePage extends StatefulWidget {
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<HomePage> {
//用户名输入框的焦点控制
FocusNode _userNameFocusNode = new FocusNode();
FocusNode _passwordFocusNode = new FocusNode();
//文本输入框控制器
TextEditingController _userNameController = new TextEditingController();
TextEditingController _passwordController = new TextEditingController();
//抖动动画控制器
ShakeAnimationController _userNameAnimation = new ShakeAnimationController();
ShakeAnimationController _userPasswordAnimation = new ShakeAnimationController();
//Stream 更新操作控制器
StreamController<String> _userNameStream = new StreamController();
StreamController<String> _userPasswordStream = new StreamController();
@override
Widget build(BuildContext context) {
//手势识别点击空白隐藏键盘
return GestureDetector(
onTap: () {
hindKeyBoarder();
},
child: Scaffold(
appBar: AppBar(
title: Text("登录"),
),
//登录页面的主体
body: buildLoginWidget(),
),
);
}
... ...
}
2 点击空白的用户体验
那就是把键盘隐藏了,代码如下:
void hindKeyBoarder() {
//输入框失去焦点
_userNameFocusNode.unfocus();
_passwordFocusNode.unfocus();
//隐藏键盘
SystemChannels.textInput.invokeMethod('TextInput.hide');
}
3 线性布局排列
将用户名与密码还有登录按钮使用 Column 线性排列。
//登录页面的主体
Widget buildLoginWidget() {
return Container(
margin: EdgeInsets.all(30.0),
//线性布局
child: Column(
children: [
//用户名输入框
buildUserNameWidget(),
SizedBox(
height: 20,
),
//用户密码输入框
buildUserPasswordWidget(),
SizedBox(
height: 40,
),
//登录按钮
Container(
width: double.infinity,
height: 40,
child: ElevatedButton(
child: Text("登录"),
onPressed: () {
checkLoginFunction();
},
),
)
],
),
);
}
4 输入框的构建
用户名输入框
///用户名输入框 Stream 局部更新 error提示
/// ShakeAnimationWidget 抖动动画
///
StreamBuilder<String> buildUserNameWidget() {
return StreamBuilder<String>(
stream: _userNameStream.stream,
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
return ShakeAnimationWidget(
//微左右的抖动
shakeAnimationType: ShakeAnimationType.LeftRightShake,
//设置不开启抖动
isForward: false,
//抖动控制器
shakeAnimationController: _userNameAnimation,
child: new TextField(
//焦点控制
focusNode: _userNameFocusNode,
//文本控制器
controller: _userNameController,
//键盘回车键点击回调
onSubmitted: (String value) {
//点击校验,如果有内容输入 输入焦点跳入下一个输入框
if (checkUserName()) {
_userNameFocusNode.unfocus();
FocusScope.of(context).requestFocus(_passwordFocusNode);
} else {
FocusScope.of(context).requestFocus(_userNameFocusNode);
}
},
//边框样式设置
decoration: InputDecoration(
//红色的错误提示文本
errorText: snapshot.data,
labelText: "用户名",
//设置上下左右 都有边框
//设置四个角的弧度
border: OutlineInputBorder(
//设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
),
);
},
);
}
密码输入框,两个输入框的构建类似
StreamBuilder<String> buildUserPasswordWidget() {
return StreamBuilder<String>(
stream: _userPasswordStream.stream,
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
return ShakeAnimationWidget(
//微左右的抖动
shakeAnimationType: ShakeAnimationType.LeftRightShake,
//设置不开启抖动
isForward: false,
//抖动控制器
shakeAnimationController: _userPasswordAnimation,
child: new TextField(
focusNode: _passwordFocusNode,
controller: _passwordController,
onSubmitted: (String value) {
if (checkUserPassword()) {
loginFunction();
} else {
FocusScope.of(context).requestFocus(_passwordFocusNode);
}
},
//隐藏输入的文本
obscureText: true,
//最大可输入1行
maxLines: 1,
//边框样式设置
decoration: InputDecoration(
labelText: "密码",
errorText: snapshot.data,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
),
);
},
);
}
5 校验用户名与密码的方法如下
bool checkUserName() {
//获取输入框中的输入文本
String userName = _userNameController.text;
if (userName.length == 0) {
//Stream 事件流更新提示文案
_userNameStream.add("请输入用户名");
//抖动动画开启
_userNameAnimation.start();
return false;
} else {
//清除错误提示
_userNameStream.add(null);
return true;
}
}
bool checkUserPassword() {
String userPassrowe = _passwordController.text;
if (userPassrowe.length < 6) {
_userPasswordStream.add("请输入标准密码");
_userPasswordAnimation.start();
return false;
} else {
_userPasswordStream.add(null);
return true;
}
}
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的完整源码在这里
Flutter 一个优美的用户体验的登录页面 抖动提示 文本提示
以小编的性格,肯定是要录制一套视频的,点击这里查看详情
有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人