Flutter 入门与实战（九），附学习笔记+面试整理+进阶书籍

最新推荐文章于 2024-10-01 20:41:19 发布

m0_57540655

最新推荐文章于 2024-10-01 20:41:19 发布

阅读量795

点赞数 25

分类专栏：前端程序员文章标签： flutter 学习笔记

本文链接：https://blog.csdn.net/m0_57540655/article/details/136782434

版权

前端程序员专栏收录该内容

9 篇文章 0 订阅

订阅专栏

child: Text(
‘登录’,
),
onPressed: () {
print(
‘Login: username= ${_username.trim()}, password=$ {_password.trim()}’);
},
),
);
}

按钮点击回调事件为 onPressed，这里只是简单地打印了表单的内容。

TextField 文本框

TextField 是 Flutter 提供的文本输入框，TextField 的属性非常多，常用的属性如下：

keyboardType：键盘类型，可以指定是数字、字母、电话号码、邮箱、日期等多种方式，通过与表单内容匹配的键盘类型可以提供输入效率，进而改善用户体验。
controller：TextEditingController 对象，TextEditingController 主要用于控制文本框的初始值，清除内容的操作。
obscureText：是否需要隐藏输入内容，如果为 true，则输入内容会使用圆点显示，通常用与密码。
decoration：文本框的装饰，属性也很多，可以指定前置图标，边框类型、后置组件等多种属性，因此可以通过 decoration 获得想要的文本框样式。
focusNode：聚焦点，可以通过这个来控制文本框是否获取焦点，从而实现类似上一个下一个的输入控制。
onChanged：输入值改变事件回调，通常用这个方法实现双向绑定。

在这个案例中，我们使用了一个前置图标用来表示输入内容的类型，比如使用手机图标代表输入手机号，使用锁代表代表密码。同时使用了一个 Offstage作为后置的组件，用于在输入内容后可以点击清除内容。Offstage 组件是通过一个属性offstage来控制组件是否显示，这样我们可以在没有内容的时候隐藏它，有输入内容的时候再显示。

为了提高代码复用性，使用了一个方法获取通用的文本框，这里主要是使用了 Container包裹以控制边距和文本框下的分隔线：

Widget _getInputTextField(
TextInputType keyboardType, {
FocusNode focusNode,
controller: TextEditingController,
onChanged: Function,
InputDecoration decoration,
bool obscureText = false,
height = 50.0,
}) {
return Container(
height: height,
margin: EdgeInsets.all(10.0),
child: Column(
children: [
TextField(
keyboardType: keyboardType,
focusNode: focusNode,
obscureText: obscureText,
controller: controller,
decoration: decoration,
onChanged: onChanged,
),
Divider(
height: 1.0,
color: Colors.grey[400],
),
],
),
);
}

完整代码

class _LoginPageState extends State {
//TextEditingController可以使用 text 属性指定初始值
TextEditingController _usernameController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
String _username = ‘’, _password = ‘’;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘登录’),
brightness: Brightness.dark,
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
_getRoundImage(‘images/logo.png’, 100.0),
SizedBox(
height: 60,
),
_getUsernameInput(),
_getPasswordInput(),
SizedBox(
height: 10,
),
_getLoginButton(),
],
),
),
);
}

Widget _getUsernameInput() {
return _getInputTextField(
TextInputType.number,
controller: _usernameController,
decoration: InputDecoration(
hintText: “输入手机号”,
icon: Icon(
Icons.mobile_friendly_rounded,
size: 20.0,
),
border: InputBorder.none,
//使用 GestureDetector 实现手势识别
suffixIcon: GestureDetector(
child: Offstage(
child: Icon(Icons.clear),
offstage: _username == ‘’,
),
//点击清除文本框内容
onTap: () {
this.setState(() {
_username = ‘’;
_usernameController.clear();
});
},