前面提到基础部件的时候,忘了提输入内容处理部件,这里补上,然后顺带撸个实际的界面吧
1、TextField
1 | const TextField({ |
那么,简单的来个输入框示例吧,然后通过 Text 展示结果
1 | class HomePage extends StatefulWidget { |
这边需要提下的是 setState 方法,该方法只有 StatefulWidget 才有,当需要修改某个值的内容的时候,通过该方法进行修改,最后的效果图如下,当输入框文字发生变化的时候,监听的 Text 内容会随之改变,获取内容的 Text 当点击按钮了才发生变化
该部分代码查看 text_field_main.dart 文件
那么如果有个需求,在点击按钮的时候需要对输入的内容的合理性进行检测,当然可以通过 TextEditingController 的结果进行检测,但是还有个更加方便的方法,可以直接使用部件 TextFormField 来实现,不过需要我们在外层加一个 Form 部件,接下来,就要准备通过 TextFormField 来撸一个登录界面,但是这之前,前面有个坑需要先解决下
2、导入自定义的图标
在这之前,涉及到 Icon 部件,都是使用的系统自带的图标,那么如何导入第三方自定义图标呢,马上为你揭晓答案,首先我们需要打开「阿里妈妈」也就是 iconfont,不知道的小伙伴通过链接打开,然后需要注册个账户,也可以直接通过 Github 等三方登录,然后就可以搜索我们需要的图标了,接下来需要撸一个登录,那我们就找一个 用户 和 密码 的图标吧,选择喜欢的图标,然后鼠标放到图标会出现三个按钮,直接点击 购物车 那个按钮,然后就可以通过顶部的 购物车 按钮查看添加的图标,点击下载代码,把资源文件下载到本地。
解压后,需要用到的文件有两个,别的可以忽略
- demo_index.html 这边用来查看图标的 unicode
- iconfont.ttf 这边就是图标资源文件了
回到项目,创建一个文件夹 fonts ,和 images 同级,将 iconfont.ttf 文件放到该文件夹下,然后打开 pubspec.ymal 文件,注册下导入的资源,可以自己命名 iconfont.ttf 文件名,便于自己发现就行,例如我命名为 third_part_icon.ttf,在注册图片下面继续添加
1 | fonts: |
注册完了记得点击 Package get,否则会找不到资源。接着新建个 third_icons.dart文件
1 | import 'package:flutter/material.dart'; |
接下来就可以通过该类导入需要的第三方图标了。
3、导入第三方插件
其实 Flutter 中缺少很多功能,需要通过导入第三方插件来实现功能,插件就是 Flutter 和原生交互的桥梁,也就是说,要写 Flutter 的插件,需要写 Android 和 iOS 两端代码才可,否则只有在其中一个端能够实现功能。好在有很多现成的插件已经开源,可以通过 FlutterPackage 搜索到,例如等会我们会需要用到 FlutterToast 这个插件,用来做提醒用,在 FlutterPackage 中搜索到插件后,打开项目中的 pubspec.ymal 文件,在 dependencies 类目下将 fluttertoast 插件引入,如图:
然后点击 Package get 让其导入即可,别的插件也是这样导入。做好准备工作,我们就可以撸一个登录界面了~
4、撸一个登录界面
在开撸之前,我们先看下最终的效果图吧,虽然是比较常用的界面
因为两个界面比较相似,所以这边只贴外层的代码和登录的代码,具体的代码,可以查看源码,已经推到 Github
1 | void main() { |
撸完界面后,可以试下登录效果,如果输入框的内容,和 TextFormField 的 validator的条件不符合,则会显示错误文字的提示
如果按照条件用户名为 kuky 密码为 123456 (条件可以根据自己进行修改)则会显示登录成功的逻辑
以上代码查看 login_home_page.dart 文件
注册界面的逻辑和登录界面的逻辑几乎一样,算是第一次实战了,望小伙伴能够好好的写一遍
代码地址: