轻松学会Flutter第一节：从Form入手学会组件使用

前言

话说代码武林中出了一套绝世神功，名为Flutter，Android，iOS，Web等各路大侠纷纷前往，一探究竟，临前一览才发觉这套神功和Android，iOS这两派功法有着相辅相成的无尽妙处，习得Flutter神功，便可以双手出招，一拳一掌干掉Android和iOS，立于不败之地。

今有习得Web神功的一名江湖小生，想要学会Flutter神功，干掉Android和iOS这两个亦敌亦友的门派，一番勤学苦练，摸索探寻后，总结了一套适合Web门派子弟学习的套路，现公布天下。

正文

小生在学习Flutter这门神功时，又是购买书籍，又是观看教学视频，又是加各种Flutter交流群，一番折腾下来，小生懵了，就学会了配置环境，安装运行起来Demo，看着模拟器上那似模似样的界面，满意的点点头，看着Flutter中文网上那些组件介绍，愣是不知道该如何往下走，一时踌躇万分。

忽然灵机一动，有了思路，各路朋友们，尤其是Web门派的朋友们，请看好。

兄弟们，咱们先不看文档了，咱们直入正题，直接开撸应用，边撸边学，岂不爽哉！

咱们要做一个应用，首先要先做什么页面？首页，登录注册？我想大部分道友都是先做登录注册，页面内容少啊，简单啊，容易入手啊。

好，既然确定了第一个目标，那咱们就先整个注册页，这时，小生想到，现在一般的注册页只有个手机号，密码，验证码输入就完事了，咱既然是探索学习，那就整全一些，把一些Form相关的组件尽量能用都用上，直接学会相关联的组件使用。

工欲善其事，必先利其器。小生在Web开发中主要使用VS Code来开发，插件多，很方便，于是尝试使用此工具来开发Flutter，而且网上各路朋友大部分都是用的此工具，用着用着发现总是要手打命令，而且还要用Android Studio打开模拟器，甚是不便，于是转头来使用Android Studio。

VS Code和Android Studio关于Flutter的配置和创建项目，这里不做讲解，网上遍地都是Flutter从入门到一脸懵逼的教程。

Web门派的朋友们使用Android Studio可能会有些不适应，VS Code还能用个中文插件，看着一个个中文汉字就倍觉亲切，Android Studio全是国外字母，哪有汉字高大上，没办法，兄弟们，外国鸟字多少有点用处，凑乎着看吧。

小技巧

在Android Studio中，点击左上角File，然后点击setting，然后再点击Plugins，如果你已经配置好了Flutter，这里就会看到Dart和Flutter，兄弟们开发过程中都喜欢有关键字或者语法提示，所以兄弟们需要在这个Plugins里搜索Flutter Snippets这个插件，然后安装，安装完成后，咱们开发中输入简单的几个字母，就可以直接打出来一些组件基础模板，比如输入import、sta等都有意想不到的效果。

在开发工具左下角有这么一块内容：

兄弟们若是遇到开发过程中热重载不及时的情况，点击重启就行。
兄弟们点开右边那个Dart图表，就会打开Dart DevTools页面：

界面化的开发工具，相当便利，兄弟们可以随便点点，一看便明了。
在VS Code中我们可以通过点击键盘上的p键在模拟器上显示网格，或者o键切换Android和iOS预览模式，但是在上面这个DevTools中咱们直接点一下就可以了。

一些基础的小技巧咱们介绍到这里，开始正式的构思学习中。

学习思路

先放demo示例图：

上图是有点丑，但是你不能否认它的内涵，通过这一张图，看完下文，你就知道该怎么用上面的所有组件。
咱们要做一个注册页，是不是要有输入框？好，咱们就从中文文档里找到Flutter输入框和表单，细心有耐心的朋友可能会从头到尾的看一遍，然后再动手写代码，完全可以，其实，你不看完也没事。

不少朋友这时候肯定有疑问了，我文档看了好几遍，大概意思也明白了，但是我不知道该怎么用啊？究竟该怎么用呢？

兄弟们，作为初学者，这里你需要明白一个概念：组件，就如上图所示，你能看到的，你用到的，基本都是组件，而这些组件和VUE中你所理解的组件是差不多的。

在web中，咱们写个输入框直接写input标签就可以，然后再给这个标签添加css样式就可以，相当简单，如果咱们把这个input单独写进一个Input.vue组件文件里，并且加上了一点基本的设定样式，那么这个Input.vue组件就可以理解成Flutter中的TextField组件。

我们在使用TextField或者其他Flutter组件时，这个组件的样式，控制逻辑都在这个组件内控制实现，并不是像web中html结构，css样式和js逻辑分离开的，这一点，Web门派的道友们要尽快理解过来。

这里小生先假装你不懂Flutter路由，不知道该怎么创建一个新的页面，咱们直接在main.dart中找到body，然后将body后面的Center()组件替换成如下代码：

TextField(
  decoration: InputDecoration(
    labelText: "密码",
      hintText: "您的登录密码",
      prefixIcon: Icon(Icons.lock)
  )
)

在页面中就会出现这么一个输入框：

基本的一个输入框已经出来了，剩下的就是调整样式，按住键盘Ctrl键点击TextField，就可以查看源码，源码中列出了这个组件的所有参数，用什么就塞对应的参数就可以。

  const TextField({
    Key key,
    this.controller,    //编辑框的控制器，跟文本框的交互一般都通过该属性完成，如果不创建的话默认会自动创建
    this.focusNode,  //用于管理焦点
    this.decoration = const InputDecoration(),   //输入框的装饰器，用来修改外观
    TextInputType keyboardType,   //设置输入类型，不同的输入类型键盘不一样
    this.textInputAction,   //用于控制键盘动作（一般位于右下角，默认是完成）
    this.textCapitalization = TextCapitalization.none,
    this.style,    //输入的文本样式
    this.textAlign = TextAlign.start,   //输入的文本位置
    this.textDirection,    //输入的文字排列方向，一般不会修改这个属性
    this.autofocus = false,   //是否自动获取焦点
    this.obscureText = false,   //是否隐藏输入的文字，一般用在密码输入框中
    this.autocorrect = true,   //是否自动校验
    this.maxLines = 1,   //最大行
    this.maxLength,   //能输入的最大字符个数
    this.maxLengthEnforced = true,  //配合maxLength一起使用，在达到最大长度时是否阻止输入
    this.onChanged,  //输入文本发生变化时的回调
    this.onEditingComplete,   //点击键盘完成按钮时触发的回调，该回调没有参数，(){}
    this.onSubmitted,  //同样是点击键盘完成按钮时触发的回调，该回调有参数，参数即为当前输入框中的值。(String){}
    this.inputFormatters,   //对输入文本的校验
    this.enabled,    //输入框是否可用
    this.cursorWidth = 2.0,  //光标的宽度
    this.cursorRadius,  //光标的圆角
    this.cursorColor,  //光标的颜色
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.down,
    this.enableInteractiveSelection,
    this.onTap,    //点击输入框时的回调(){}
    this.buildCounter,
  })

这里介绍下decoration，接收一个InputDecoration类型的值，修改外观样式和提示内容，都需要在这里进行操作。

InputDecoration({
    this.icon,    //位于装饰器外部和输入框前面的图片
    this.labelText,  //用于描述输入框，例如这个输入框是用来输入用户名还是密码的，当输入框获取焦点时默认会浮动到上方，
    this.labelStyle,  // 控制labelText的样式,接收一个TextStyle类型的值
    this.helperText, //辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会显示
    this.helperStyle, //helperText的样式
    this.hintText,  //提示文本，位于输入框内部
    this.hintStyle, //hintText的样式
    this.hintMaxLines, //提示信息最大行数
    this.errorText,  //错误信息提示
    this.errorStyle, //errorText的样式
    this.errorMaxLines,   //errorText最大行数
    this.hasFloatingPlaceholder = true,  //labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示
    this.isDense,   //改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小
    this.contentPadding, //内间距
    this.prefixIcon,  //位于输入框内部起始位置的图标。
    this.prefix,   //预先填充的Widget,跟prefixText同时只能出现一个
    this.prefixText,  //预填充的文本，例如手机号前面预先加上区号等
    this.prefixStyle,  //prefixText的样式
    this.suffixIcon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛，控制输入内容是否明文
    this.suffix,  //位于输入框尾部的控件，同样的不能和suffixText同时使用
    this.suffixText,//位于尾部的填充文字
    this.suffixStyle,  //suffixText的样式
    this.counter,//位于输入框右下方的小控件，不能和counterText同时使用
    this.counterText,//位于右下方显示的文本，常用于显示输入的字符数量
    this.counterStyle, //counterText的样式
    this.filled,  //如果为true，则输入使用fillColor指定的颜色填充
    this.fillColor,  //相当于输入框的背景颜色
    this.errorBorder,   //errorText不为空，输入框没有焦点时要显示的边框
    this.focusedBorder,  //输入框有焦点时的边框,如果errorText不为空的话，该属性无效
    this.focusedErrorBorder,  //errorText不为空时，输入框有焦点时的边框
    this.disabledBorder,  //输入框禁用时显示的边框，如果errorText不为空的话，该属性无效
    this.enabledBorder,  //输入框可用时显示的边框，如果errorText不为空的话，该属性无效
    this.border, //正常情况下的border
    this.enabled = true,  //输入框是否可用
    this.semanticCounterText,  
    this.alignLabelWithHint,
  })

其他参数先不讲解，讲的太多，兄弟们就懵了，这时候肯定有朋友会想：我想要个带边框的输入框，该怎么实现呢？请看示例：

TextField(
  obscureText: true, // 是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换
  focusNode: focusPassword, // 关联focusPassword
  decoration: InputDecoration(
    hasFloatingPlaceholder: false, // labelText是否浮动，默认true，修改为false则LabelText在聚焦时不会上浮且不显示
    labelText: "请填写密码",
    hintText: "请填写密码",
    enabledBorder: OutlineInputBorder( // 输入框可用时显示的边框
        borderRadius: BorderRadius.all(Radius.circular(10)), // 直接在TextField上设置圆角边框
        borderSide: BorderSide(color: Colors.black12, width: 1)
    ),
    focusedBorder: OutlineInputBorder( // 聚焦时显示的边框
        borderRadius: BorderRadius.all(Radius.circular(10)),
        borderSide: BorderSide(color: Colors.lightBlueAccent, width: 1)
    ),
  ),
  onChanged: (val){
    // 输入内容发生变化时触发此方法，可获取到输入的内容
    print("密码输入：$val");
  },
  onSubmitted: (val) {
    // 点击键盘完成按钮时，可以触发此方法，能够获取当前输入值
    print("当前输入内容为：$val");
  },
),

兄弟们，俗话说的好：囫囵吞枣，越学越好。这话对于广大程序员来讲再合适不过了，很多朋友都不是天才或者极其聪明的人士，咱们要想快速掌握一门技术，就要先求入门，差不多，似懂非懂就可以，千万别抓着一个技术点往死里专研，非得弄个各种属性，各种原理都清晰明了再去学习其他内容。

这里就说到了最重要的一点：似懂非懂，动手便懂。兄弟们，一定要动手写起来，代码撸的多了就明白了。

输入框咱们知道的差不多了，那么就来看看单选框，复选框和开关。
示例代码如下：

Radio(
 	value: 2, // 当前组件的值
    groupValue: sex,  // 当前组件所属组的值，即操作的最终结果值
    activeColor: Colors.red, // **状态下显示的颜色
    onChanged: (e){
      // 组件本身并不会保存当前状态，选中状态由父组件来管理，当被点击时，会触发此事件。
      // 通过此事件获取当前值后更新父组件变量，借此更新页面显示状态
      setState(() {
        sex = e;
      });
    }
 ),

Checkbox(
   value: hobby[1],
   activeColor: Colors.yellow, // 设置**状态下的颜色
   onChanged: (e){
     setState(() {
       hobby[1] = e;
     });
   }
),

Switch(
   value: rich,
   activeColor: Colors.green, // **时圆点的颜色
   activeTrackColor: Colors.pink, // **时横条的颜色
   onChanged: (e){
     setState(() {
       rich = e;
     });
   }
),

兄弟们，到现在你应该知道了上述基本组件该如何使用，但是想要实现上面demo示例图中的内容，这些内容远远不够，还需要用到布局的内容，关于布局的知识点，此篇文章先不做讲解，期待小生后续更新吧~

学习步骤：
1.确定一个你想要实现的简单页面。
2.根据页面内的元素去查看学习对应的组件
3.敲代码尝试实现

点这里查看上图示例详情代码，有详细注释说明。

好的，兄弟们，这第一节就先到这里，作者也是个学习Flutter的新人，觉得本文讲的还可以的，给个关注吧，给个打赏那是再好不过了，哈哈哈哈……

青山不改，绿水长流，咱们下一篇文章见。