「本文已参加好文召集令活动，点击检查：后端、大前端双赛道投稿，2万元奖池等你应战！」
前语
之前几篇分别介绍了运用 Dio 结束后台数据的获取、删去和批改，相关文章前端面试题如下：
- Flutter入门与实战（二十二）：初次见面，网络央求王者之dio。
- Flutter入门与实战（二十三）：运用 Dio央求删去数据。
- Flutter 入门与实战（二十四）：运用 Dio的 Patch央求结束概略批改
本篇介绍怎样运用 Post 央求创立动态数据，本篇相关知识点如下：
- 导航栏右侧的 actions
- 路由匹配先后顺序，优先匹配先界说appetite的路由
- 添appetite加与批改的异同
- post 央求
- 防重点击
导航后端不支持cors栏增加操作按钮
在导航栏右上角增加操作按钮对错常常见的情况，Flutter 的 AppBar 组件供应了a后端开发薪酬一般多少ctions 参数，用于设置右上角的操作按钮，actions 是一个 List<Widget>，意味着能够增加多个组件。本例增加了数据处理的基本内容一个图标按钮，用于进入增加动态页面：
appBar: AppBar(
title: Text('动态', style: Theme.of(context).textThem数据处理的基本内容e.headline4),
actions: [
IconButton(
icon数据处理的基本内容: Icon(Icons.add),
onPressed: () {
Route数据处理办法有哪些rManager.router
.navigateTo(context源码买卖网站源码, RouterManager.dynamicAapplicationddPath);
})
],
brightnes前端s: Brightness.dark,
),
//...
RouterManager.dynamicAddPath是增加页面的路由途径常量，为 /dynamics/add。但是，咱们会发现这个路由规appear矩和/dynamics/:id ，即动态概略的实践是能够匹配的，一不小心就跳到了概略页而不是增加页面，这个时分该怎样处理呢？
Flurappearo路由匹配的先后次第
Fluro 的路由匹配次第是按照界说路由的先后次第进行匹配的，因而需求把更详细的路由放置在规划匹源码怎样做成app软件配的前面，即界说增加页面路由时要放置在概略路由的前面。这点实践上和 React Router相似，匹配到了就appstore跳出规矩，不再往下后端开发薪酬一般多少匹配。因而，在运用 Fluro 的时分需求留神界说路由的次第，不然或许会导致路由跳转不正后端工程师首要做什么确。
增加页面
增加页面的表单和批改页面相同，仅仅没有从后台读取数据填充表单内容。咱们先直接仿制之前的 dyna源码买卖网站源码mic_edit.dart 文件，偏重命名为 dynamic_add.dart，一起将Dynamic后端言语Edit 替换为 DynamicAdd。与批改页面的不同之处在于：
- _formData 需求提前界说，如下所示。
Map<String, Map<String, Object&数据处理gt;&app是什么意思gt; _formData = {
'title': {
'value': '',
'controller': TextEditingController(),
'obsecure': false,
},
'content': {
'value': '',
'coappreciatentroller': TextEditingController(),
'obsecure': false,
},
'imageUrl': {
'value': '',
'controller': TextEditingControlle源码本钱r(),
'obsecure'数据处理的基本内容: false,
},
}源码;
- _getFormWidgets构建表单组件时无需回来加载提数据处理员是干什么的示，直接回来表单即可。
- 网络央求批改为 Post 央求。approach
_handleSubmit() async {
if ((_formData['title']['value'] as String).trim() == 'app是什么意思') {
Dialogs.后端组showInfo(this.context, '标题不能为空');
retuapp是什么意思rn;
}
if ((_formData['content']['value'] as String).trim() == '') {
Dialogs.showInfo(this.context, '内容不能为空');
return;
}
if ((_formData['imag前端学什么eUrl']['value'] as Strinappreciateg).trim() == '') {
Dialogs.showInfo(this.context, '图片链接不能为空');
return;
}
try {
Map<String, String> ne源码编辑器wFormData = {};
_formData.forEach源码年代训练怎样样((key, value) {
nappeare前端wF后端组ormData[key] = value['value'];
});
var response = awai源码本钱t DynamicService.post(newFormData);
if (response.statusCode == 200) {
Dialogs.sho后端开发wInfo(context, '增加成功');
} else {
Dialogs.showInfo(this.context, response.statusM源码怎样做成app软件essage);
}
} on DioError catch (e) {
Dialogs.showInfo(this.context, e.messaAPPge);
} catch (e) {
Dialogs.showInfo(this.context, e.toString());
}
}
咱们会发现后端言语有许多办法是相似的，比如表单、表单校验以及批改时表单数据处理。因而这些一起的当地能够进行封装，但是需求考虑实践业务添后端是做什么的加和批改的表单内容或许不同，比如某些字段不允许批改等，因而考虑共通性，咱们做更通用的处理前端结构，提取一个 dynamic_form.dart 类，将通用的后端开发薪酬一般多少部分一起封装进去，前进复用性。
class DynamicForm extends StatelessWidget {
final M后端开发ap<String,数据处理名词解释 Map<前端工程师String, Object>&源码年代训练怎样样gt; formData;
final Function handleTextFieldChanged;
final ValueChanged<String> handleCle后端开发薪酬一般多少ar;
final String buttonName;
fin源码本钱al Function handleSubmit;
c后端不支持corsonst DynamicForm(this.formData, this.handleTextFieldChanged源码年代训练怎样样,
this.handleClear, this.buttonName, this.handleSubmit,
{Key key})
: super(key: key);
@ove后端和前端有什么区别rride
Widget build(BuildContext context) {
return Container(
child: Column(children: _g后端工程师首要做什么etForm(context)),
);
}
List<Widget>appointment _getForm(B后端开发需求学什么uildContexapp是什么意思t context) {
List<Widget>前端技能; widgets = [];
formData.forEach((key, formParams) {
widgets.add(FormUtil.textField(key, fAPPormParams['value'],
controller: formParams['con源码怎样做成app软件trolle后端开发r'] ?? null,
hintText: for数据处理包含对作业表的什么功用mParams源码本钱['hintText'] ?? '',
prefixIcon: formParams['icon'],
onChanged: handle后端组TextFieldChanged,
onClear: handleClear));
});
widgets
.add前端学什么(ButtonUtil.primaryTextButton(buttonName, handleSubmit, context));
return widgets;
}
}
封装完之后，批改和增加页面的_formData需求增加将构建 TextField 的字段补齐，而不是之前那样写死，这样更灵敏。而且，代码将更为简洁，appearance以增加页面为例。
@over后端不支持corsride
Widge源码编辑器t build(BuildContext context) {
r后端开发是干什么的eturn Scaffold(
appBar: AppBar(
title: Text('增加动态'),
brightness: Brightness.dark,
),
body: DynamicForm(
_formData,
_handleTextFieldChanged,
_han前端开发需求学什么dleClear,
'提交',
_handleSubmit,
),
);
}
防重提交
调试过程中发现源码编辑器编程猫，点击提交按钮时保存的数据会有多条。Flutter 怎样防重提交？
一般防重提交的处理办法一种是点击后禁用，等待网络央求成果回来后再启用按钮。其他一种办法就是增加Loading蒙层，在网络央求没结束前运用蒙层将页面遮挡，然后避免操作表前端和后端的区别单及按钮。这儿咱们选用第二种办法，通过蒙层的办法指示能够避免操作表单，也能够给出加载数据处理员是干什么的指示。
在 pub 上供应了一个 flutter_easyloading 的插件，能够满足这要求。详细运用是在main.dart的源码年代 MatertialApp 的 builder 参数传递EasyLoading.init()办法，初始化一个大局的Eas数据处理的最小单位yLoading对象，之后后端工程师首要做什么就能够在页面中随时调用了。闪现的时分调用 showXXX 办法，消失的时分调用 dismiss 办法，能够设置多种 loading 款式，也支撑自界说 loading 组件以及自界说参数，详细能够参阅：flutter_easyloa前端学什么ding。咱们在提交前闪现EasyLoading，接收到数据后移除Easy前端和后端哪个薪酬高Loading即可。
_handleSubmit() async {
//...校验代码
EasyLoading.showInfo('请稍源码是什么意思候...', maskType: EasyLoadingMaskType.black);
//...网络央求代码
EasyLoading.dismis前端开发是干什么的s();
}
总结
本篇介绍了新增数据页面的示例后端开发是干什么的，一起关于批改和增加的页面重复部分通过封装共用的表单组件简化了页面结构和前进复用性。考虑实践操数据处理是什么作业作的重复点击，还引入了 flutter_easyloading 来实现加载蒙层的作用。源码已提交至：网络章节源码。留神运行时拉取最app是什么意思新的后台代码运行，避免找不到后台服务加载不了数据。
