前言

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

按钮组件

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.