前言
话说代码武林中出了一套绝世神功，名为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的新人，觉得本文讲的还可以的，给个关注吧，给个打赏那是再好不过了，哈哈哈哈……
青山不改，绿水长流，咱们下一篇文章见。
网友评论