Flutter（四）| 随机密码
下面我们学习如何写一个随机密码程序。如果你对Flutter的基础还不熟悉，可以先通过官方文档进行学习：https://flutter.cn/docs/get-started/learn-more
random_password.dart
在lib目录下新建一个文件夹random，然后在random下面新建一个random_password.dart文件：
import 'package:flutter/material.dart';
class RandomPasswordPage extends StatefulWidget {
@override
_RandomPasswordPageState createState() => _RandomPasswordPageState();
}
class _RandomPasswordPageState extends State<RandomPasswordPage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Random',
theme: ThemeData(
canvasColor: Color(0xFFF8F8FF),
),
home: Scaffold(
appBar: AppBar(
title: Text('Random Password'),
centerTitle: true,
),
body: Column(
children: <Widget>[],
),
),
);
}
}main.dart
修改main.dart，删除其它代码，只留下main函数：
import 'package:flutter/material.dart';
import 'package:random_app/random/random_password.dart';
void main() {
runApp(RandomPasswordPage());
}再次重新运行flutter run，就可以看到自己写的页面。
Switch框
在random_password.dart中的_RandomPasswordPageState类加入代码：
bool _lowercase = true;
bool _uppercase = true;
bool _number = true;
bool _speical = true;
Widget _switchLowercase() {
return Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 150,
height: 30,
child: Text(
'Lowercase Letter',
style: TextStyle(fontSize: 17),
),
),
Container(
child: Switch(
value: _lowercase,
onChanged: (value) {
setState(() {
_lowercase = value;
});
},
),
),
],
)
],
),
);
}
Widget _switchUppercase() {
return Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 150,
height: 30,
child: Text(
'Uppercase Letter',
style: TextStyle(fontSize: 17),
),
),
Container(
child: Switch(
value: _uppercase,
onChanged: (value) {
setState(() {
_uppercase = value;
});
},
),
),
],
)
],
),
);
}
Widget _switchNumber() {
return Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 150,
height: 30,
child: Text(
'Arabic Numeral',
style: TextStyle(fontSize: 17),
),
),
Container(
child: Switch(
value: _number,
onChanged: (value) {
setState(() {
_number = value;
});
},
),
),
],
)
],
),
);
}
Widget _switchSpecial() {
return Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 150,
height: 30,
child: Text(
'Special Character',
style: TextStyle(fontSize: 17),
),
),
Container(
child: Switch(
value: _speical,
onChanged: (value) {
setState(() {
_speical = value;
});
},
),
),
],
)
],
),
);
}onChanged 表示当值改变时的回调函数。
写前端代码的一大优势就是’所见即所得’，对代码中的关键字大家可以直接点击进去（在VSCode中使用Ctrl+鼠标左键），里面有大段的解释。
举个例子，如果不懂mainAxisAlignment这个变量有什么用， 可以直接点进去，可以看到这个代码
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,明显这个mainAxisAlignment变量就是用MainAxisAlignment结构体修饰的， 点击MainAxisAlignment，就可以看到它的定义：
/// How the children should be placed along the main axis in a flex layout.
///
/// See also:
///
/// * [Column], [Row], and [Flex], the flex widgets.
/// * [RenderFlex], the flex render object.
enum MainAxisAlignment {
/// Place the children as close to the start of the main axis as possible.
///
/// If this value is used in a horizontal direction, a [TextDirection] must be
/// available to determine if the start is the left or the right.
///
/// If this value is used in a vertical direction, a [VerticalDirection] must be
/// available to determine if the start is the top or the bottom.
start,
/// Place the children as close to the end of the main axis as possible.
///
/// If this value is used in a horizontal direction, a [TextDirection] must be
/// available to determine if the end is the left or the right.
///
/// If this value is used in a vertical direction, a [VerticalDirection] must be
/// available to determine if the end is the top or the bottom.
end,
/// Place the children as close to the middle of the main axis as possible.
center,
/// Place the free space evenly between the children.
spaceBetween,
/// Place the free space evenly between the children as well as half of that
/// space before and after the first and last child.
spaceAround,
/// Place the free space evenly between the children as well as before and
/// after the first and last child.
spaceEvenly,
}
代码中有详细的注释，大家在学习的时候，也可以修改其他选项，体会其中的不同。
同时修改build接口中的body，加入上面写的4个Widget：
body: Column(
children: <Widget>[
_switchLowercase(),
_switchUppercase(),
_switchNumber(),
_switchSpecial(),
],
),重新运行之后，在页面中就可以看到4个switch框。
有关App布局的更多资料，大家可以始查阅官方文档：https://flutter.cn/docs/development/ui/layout/tutorial
在下一节中，我们将学习如何输入文本框和显示文本框？
0
