Flutter 入门与实战（九）(1)，androidjni开发书籍

return Container(
height: 50,
width: double.infinity,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(4.0),
),
child: TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.white),
backgroundColor:
MaterialStateProperty.all(Theme.of(context).primaryColor),
),
child: Text(
‘登录’,
),

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

onPressed: () {
print(
‘Login: username=${}_{u}sername.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();
});
},
),
),
//使用 onChanged 完成双向绑定
onChanged: (value) {
this.setState(() {
_username = value;
});
},
);
}

Widget _getPasswordInput() {
return _getInputTextField(
TextInputType.text,
obscureText: true,
controller: _passwordController,
decoration: InputDecoration(
hintText: “输入密码”,
icon: Icon(
Icons.lock_open,
size: 20.0,
),
suffixIcon: GestureDetector(
child: Offstage(
child: Icon(Icons.clear),
offstage: _password == ‘’,
),
onTap: () {
this.setState(() {
_password = ‘’;
_passwordController.clear();
});
},
),
border: InputBorder.none,