前言
继续学习,从按钮组件开始
按钮组件教程传送门
按钮组件
Material组件库中的按钮
所有Material库中的按钮都有
- 按下时会有“水波动画”
- 有一个
onPressed
属性来设置点击回调,当按钮按下时执行该回调,如果不提供该回调按钮会处于禁用状态
1.RaisedButton
漂浮按钮,默认带有阴影和灰色背景,按下后,阴影会变大
RaisedButton(
child: Text("normal"),
onPressed: () {},
);
2.FlatButton
扁平按钮,默认背景透明并不带阴影,按下后会有背景色
3.OutlineButton
默认有个边框,不带阴影而且背景透明,按下之后边框颜色会变亮,同时出现背景和阴影
4.IconButton
不包含文字的圆形按钮,相当于一个可点击的Icon,默认没有背景
IconButton(
icon: Icon(Icons.account_balance),
onPressed: (){
},
带图标的上述三种按钮
RaisedButton、FlatButton、OutlineButton都有一个icon
构造函数可以轻松创建带有图标的按钮
基本格式
OutlineButton.icon(
icon: Icon(Icons.add_a_photo),
label: Text("拍照"),
onPressed: (){
},
),
图片
加载本地图片
首先要在pubspec.yaml
中添加图片资源,图片的位置最好要在pubspec.yaml
所在的文件路径下新建新的文件夹并进行添加
# To add assets to your application, add an assets section, like this:
assets:
- image/1.jpg
- image/2.jpg
- image/3.jpg
注意:assets需要有两个空格,否则会有错误
随后就可以在主界面编写代码了
基本格式
Image(
image: AssetImage("image/1.jpg"),
width: 400.0,
),
加载网络图片
Image自带的一个构造函数,在其中填写图片的URL就行了
基本格式
Image.network(
"http://image2.sina.com.cn/dy/o/2006-12-16/967efac176c16b092785d962ff77f88d.jpg",
width: 400.0,
),
单选开关和复选框
因为Switch和Checkbox需要维护状态,因此需要继承StatefulWidget
来管理状态
这里需要注意的是官方教程有个错误
因为Switch和Checkbox是Material库的组件,因此需要返回Scaffold
,而不是单纯的Columns
class SwitchBoard extends StatefulWidget{
@override
_SwitchBoard createState() => new _SwitchBoard();
}
class _SwitchBoard extends State<SwitchBoard>{
bool _switchSelected = true; //switch状态
bool _checkboxSelected = true; //checkbox状态
@ override
Widget build(BuildContext context){
return Scaffold( //在这里有出入,需要返回Scaffold,否则会报错
body:Column(
children: <Widget>[
Text("xacas"),
Switch(
value: _switchSelected,
onChanged: (value){
setState(() {
_switchSelected=value;
print("SwitchcurrentState: $value");
}); //输出Switch状态
},
),
Checkbox(
value: _checkboxSelected,
activeColor: Colors.green,
onChanged: (value){
setState(() {
_checkboxSelected = value;
print("CheckBoxcurrentState: $value"); //输出Checkbox状态
});
},
)
],
)
);
}
}
打开的效果如下,这里在两者的onChange函数中编写了状态信息输出,方便观察状态转换
输入框
TextField
用于文本输入,它提供了很多属性
autofocus
是否自动获取焦点
obscureText
是否隐藏正在编辑的文本,比如说用于输入密码的场景等,文本内容会用·
代换
maxLines
输入输入框最大行数,默认为1
maxLength
代表输入框文本最大长度,设置后输入框右下角会显示输入的文本计数
maxLengthEnforced
决定当输入文本框超过maxLength时是否阻止输入
onChange
输入框内容改变时的回调函数
onEditingComplete
输入框完成时触发,不接受参数
onSubmitted
输入框完成时触发,以当前输入内容作为参数
这里写了一个用户名和密码的输入范例
有以下约束:
- 密码长度不大于10,否则会限制输入
- 密码的文本会被点点代替
class SwitchBoard extends StatefulWidget{
@override
_SwitchBoard createState() => new _SwitchBoard();
}
class _SwitchBoard extends State<SwitchBoard>{
bool _switchSelected = true;
bool _checkboxSelected = true;
@ override
Widget build(BuildContext context){
return Scaffold(
body:Column(
children: <Widget>[
AppBar(
title: Text("输入框测试"),
),
TextField(
autofocus: true,
decoration: InputDecoration(
labelText: "用户名",
hintText: "手机号或邮箱",
prefixIcon: Icon(Icons.person_outline)
),
),
TextField(
autofocus: true,
decoration: InputDecoration(
labelText: "密码",
hintText: "不大于10位",
prefixIcon: Icon(Icons.lock)
),
obscureText: true, //隐藏文本
maxLength: 10, //设置最大长度
maxLengthEnforced: true //设置超过最大长度后会采取措施
,
)
],
)
);
}
}
获取输入框内容
可以使用controller来获取
每个输入框可以有一个controller
定义controller如下
TextEditingController _PasswordController =TextEditingController();
可以与State的各个状态一起定义
随后通过_unameController.text
来获取数据
我这里是使用了一个按钮,通过onPressed
属性来获取控制器数据
class SwitchBoard extends StatefulWidget{
@override
_SwitchBoard createState() => new _SwitchBoard();
}
class _SwitchBoard extends State<SwitchBoard>{
bool _switchSelected = true;
bool _checkboxSelected = true;
TextEditingController _PasswordController =TextEditingController();
TextEditingController _unameController =TextEditingController();
@ override
Widget build(BuildContext context){
return Scaffold(
body:Column(
children: <Widget>[
AppBar(
title: Text("输入框测试"),
),
TextField(
autofocus: true,
controller: _unameController,
decoration: InputDecoration(
labelText: "用户名",
hintText: "手机号或邮箱",
prefixIcon: Icon(Icons.person_outline)
),
),
TextField(
autofocus: true,
controller: _PasswordController,
decoration: InputDecoration(
labelText: "密码",
hintText: "不大于10位",
prefixIcon: Icon(Icons.lock)
),
obscureText: true,
maxLength: 10,
maxLengthEnforced: true
,
),
RaisedButton.icon(
label: Text("提交"),
icon: Icon(Icons.send),
onPressed:
() {
print("用户名:${_unameController.text} 密码:${_PasswordController.text}");
}
,
)
],
)
);
}
}
到这边也差不多了,这一篇就水到这里吧,第一次用gif,感觉还不错的
Q.E.D.
Comments | 0 条评论