用户登录

打开 post_create_form.dart ,在文件的顶部先导入一个包,导入的是 package:provider/provider.dart 。然后继续编辑一下这个小部件,在这个状态类里先添加几个属性,先准备一个表单需要的 key ,声明一个 formKey,新建一个 GlobalKey,类型是 FormState。

再声明一个 bool 类型的属性,名字是 canValidate,默认值是 true。然后再准备一下标题字段与正文字段要用的控制器,声明一个 titleFieldController,新建一个 TextEditingController() ,再声明一个 contentFieldController,新建一个 TextEditingController() 。

然后在 build 方法里声明一个 postCreateModel ,值是 context.watch() 类型是 PostCreateModel。

titleField

下面再准备一个标题字段,声明一个 titleField,新建一个 AppTextField ,把 labelText 设置成 标题,再把 controller 设置成 titleFieldController ,设置一下 enabled ,值是 !postCreateModel.loading,这样如果这个 loading 的值是 true 的话,就会禁用这个文本字段。再添加一个 canValidate,值是 canValidate 。

然后添加一个 onChanged,这个方法有个 value 参数,在这个方法里执行 postCreateModel.setTitle,把 value 交给这个方法。

contentField

复制一份这个 titleField,再声明一个 contentField,把 labelText 的值设置成 正文,controller 用的是 contentFieldController,然后再添加一个 isMultiline ,值是 true ,在 onChanged 方法里,执行 postCreateModel 里的 setContent 这个方法,把 value 交给这个方法。

submitCreatePost()

下面可以定义一个方法,名字叫 submitCreatePost,用 async 标记一下这个方法。

submitButton

然后准备一个提交按钮,声明一个 submitButton,值可以新建一个 AppButton ,text 设置成发布。再设置一下 onPressed ,它的值可以判断一下 postCreateModel.loading ,如果是真的,就让 onPressed 的值是 null,这样按钮就会是禁用状态,如果 loading 的值是 false,可以用一下 submitCreatePost 。

这里提示了一个错误,说参数有点问题,打开这个 AppButton 小部件,我们可以允许这个小部件的 onChanged 的值是 null 。回来继续再编辑 PostCreateForm。

小部件

设置一下这个 build 方法 return 的值,可以用一个 Form ,设置一下它的 key,值是 formKey ,它的 child 是一个 Column 小部件,把 mainAxisAlignment 设置成 MainAxisAlignment.center,再把 crossAxisAlignment 设置成 CrossAxisAlignment.start 。

在这个 Column 小部件的 children 里面,添加一个 titleField,一个 contentField,再添加一个 submitButton。

观察一下应用的界面,现在这个添加页面上会显示两个文本字段,还有一个提交按钮。现在这个提交按钮,还有文本字段都是正常的状态。

打开项目里的 post_create_model.dart,这里我们可以手工修改一下这个 loading 的值,让它等于 true ,你会发现,这个创建内容里的文本字段还有按钮都不能用了,也就是我们可以通过设置这个 loading 的值来调整这个表单是否可用。最后再把这个 loading 默认的值设置成 false。

定义创建内容表单小部件(PostCreateForm)《 Flutter 2:创建内容 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点