前言

继续学习,从按钮组件开始
按钮组件教程传送门

按钮组件

Material组件库中的按钮

所有Material库中的按钮都有

  • 按下时会有“水波动画”
  • 有一个onPressed属性来设置点击回调,当按钮按下时执行该回调,如果不提供该回调按钮会处于禁用状态

1.RaisedButton

漂浮按钮,默认带有阴影和灰色背景,按下后,阴影会变大

RaisedButton(
  child: Text("normal"),
  onPressed: () {},
);

漂浮按钮点击效果

2.FlatButton

扁平按钮,默认背景透明并不带阴影,按下后会有背景色
扁平按钮点击效果

3.OutlineButton

默认有个边框,不带阴影而且背景透明,按下之后边框颜色会变亮,同时出现背景和阴影

Outline按钮点击效果

4.IconButton

不包含文字的圆形按钮,相当于一个可点击的Icon,默认没有背景

 IconButton(
              icon: Icon(Icons.account_balance),
              onPressed: (){

              },

54.gif

带图标的上述三种按钮

RaisedButton、FlatButton、OutlineButton都有一个icon构造函数可以轻松创建带有图标的按钮

基本格式

OutlineButton.icon(
              icon: Icon(Icons.add_a_photo),
              label: Text("拍照"),
              onPressed: (){

              },
            ),

55.gif

图片

加载本地图片

首先要在pubspec.yaml中添加图片资源,图片的位置最好要在pubspec.yaml所在的文件路径下新建新的文件夹并进行添加

56.PNG

  # 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,
            ),

加载网络图片

57.PNG
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函数中编写了状态信息输出,方便观察状态转换
58.gif

输入框

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	//设置超过最大长度后会采取措施
            ,
          )

      ],
    )
    );
  }
}

59.gif

获取输入框内容

可以使用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}");

          }
          ,
        )

      ],
    )
    );
  }
}

510.gif

到这边也差不多了,这一篇就水到这里吧,第一次用gif,感觉还不错的

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议