Flutter（五）| 随机密码
在随机密码中，我们需要输入密码长度，并显示生成的密码。
TextField
文本输入框是基本的Widget，在随机密码的时候，需要定义密码长度：
String _length = '12';
Widget _textLength() {
return Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
child: Text(
'Length',
style: TextStyle(fontSize: 17),
),
),
Container(
child: SizedBox(
width: 100,
height: 40,
child: TextField(
//maxLength: 3,
controller: TextEditingController(text: _length),
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: 'Enter length',
// hintStyle: TextStyle(color: Colors.grey),
),
keyboardType: TextInputType.number,
inputFormatters: [FilteringTextInputFormatter.digitsOnly, LengthLimitingTextInputFormatter(2)],
onChanged: (text) {
_length = text;
},
),
),
),
],
)
],
),
);
}
keyboardType 输入键盘的类型，这里是数字。
inputFormatters 输入文本的格式，digitsOnly表示只能输入数字。
LengthLimitingTextInputFormatter 表示输入数字的长度。
显示文本
文本的显示其实很简单，直接用Text就可以，只不过为了突显一下，需要为其加上边框：
String _password = '';
Widget _textShow() {
return Container(
margin: const EdgeInsets.all(15),
padding: const EdgeInsets.all(10),
width: 300,
height: 120,
alignment: Alignment.center,
child: Text(
_password,
softWrap: true,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(17),
border: Border.all(
color: Color(0xFFE6E6E6),
width: 2,
),
),
);
}生成按钮
程序还需要一个生成按钮，点击之后生成密码，并显示在文本框里面：
Widget _buttonGenerate() {
return Container(
width: 130,
height: 50,
child: MaterialButton(
color: Colors.blue,
textColor: Colors.white,
child: Text(
'Generate',
style: TextStyle(fontSize: 18),
),
onPressed: () {},
),
);
}onPressed 表示点击按钮的回调函数。
修改一下build接口中的body，把上面的Widget显示在界面中：
body: Column(
children: <Widget>[
_switchLowercase(),
_switchUppercase(),
_switchNumber(),
_switchSpecial(),
_textLength(),
_textShow(),
_buttonGenerate(),
],
),重新run一下程序，到这一步界面开发基本完成了。
在下一节中，我们将学习如何生成随机密码？
0
