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, //正常情况下的borderthis.enabled = true,  //输入框是否可用this.semanticCounterText,  this.alignLabelWithHint,})

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

TextField(obscureText: true, // 是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换focusNode: focusPassword, // 关联focusPassworddecoration: 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的新人，觉得本文讲的还可以的，给个关注吧，给个打赏那是再好不过了，哈哈哈哈……

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

Flutter修仙传第一章：从Form入手学会组件使用相关推荐

Flutter修仙传第二章：路由详解
兄弟们,咱们又见面了. 在上一章中,咱们入门学习了Flutter神功,会了些皮毛,知道了输入框,单选复选等这些基础组件的使用,小生并没有讲解按钮这种基础组件的使用,像这种easy的不能再easy的组件 ...
Flutter修仙传——起源
天地玄黄,宇宙洪荒.日月盈昃,辰宿列张.上古时代,手机的江湖,正经历了第三纪元的更迭,塞班王朝的陨灭,让这个世界又重新恢复到了一片蛮荒之中. 而几乎就在同时,天地之间诞生了两位宗师,名曰Android ...
《卓有成效的管理者》笔记，第一章卓有成效是可以学会的
第一章卓有成效是可以学会的卓有成效意味着工作要产生效益和完成某些工作,必须按时完成该做的事情. 一个人的有效性与他的智力.想象力或知识之间,几乎没有太大的关联.有才能的人往往是最无效的,因为他们没 ...
懒人修仙传ce修改方法_专访｜《凡人修仙传》原著作者忘语：“韩老魔”原型是我...
澎湃新闻记者范佳来 "现在看<凡人修仙传>,已经隔了好多年了." 回顾自己的代表作,笔名"忘语"的丁凌涛说,自己那时候的创作状态很幸福," ...
懒人修仙传ce修改方法_除了凡人修仙传，你还看过哪部偏写实的国漫吗？来了解一下吧...
不知从何时起,就有动画从业者有意无意地把真人带进动画,这种动画都偏写实风,无论是从人物的皮肤质感还是模型对比上都更贴近真人,有的时候甚至连人物面部肌肉的松弛皱纹都能清晰可见的做出来. 我不知道这是否舍 ...
懒人修仙传ce修改方法_盘点《西游记》中增长寿命的6种方法，其中长生不老的方法有三种...
长生不老是每个人梦寐以求的事情,古代那么多皇帝没事就请道士来炼丹,不就是希望自己能长生不老么,结果不仅没长生不老,反而因丹毒而英年早逝.而这种思想,也是深深的影响着诸多小说,比如<西游记> ...
懒人修仙传ce修改方法_凡人修仙传：韩立被吐槽其貌不扬，又是“平平无奇古天乐”？...
秉持着精彩的打斗不能断片的原则,<凡人修仙传>将12集中韩立和封岳的打斗场景又安排在了第13集的片头,虽然让部分观众颇有怨言,直呼很水,但总算给了这段打斗一个完整的场面.凡人下半季的开场一 ...
【Python数据】懒人修仙传数值
#最近的游戏都已经高大上了! #数据都已经加密成这样子了,我在贴吧看到了大神的操作,然后我再把它总结了出来 #设计一个能自由切换的程序#-------------------------------- ...
不熬夜，不修仙，B站打怪升级脚本一键搞定！
文 | 某某白米饭来源:Python 技术「ID: pythonall」在 B 站上看了进击的金厂长的投稿的视频如:B 界等级修仙传,B 界等级修魔传等,觉得 B 站升级对小编这种白嫖党 + 懒癌 ...

Flutter修仙传第一章：从Form入手学会组件使用

Flutter修仙传第一章：从Form入手学会组件使用相关推荐

最新文章

热门文章