flutter区别于vue的写法

View.dart

页面渲染:

类似于vue里面使用 <template> <div> <span> <textarea>等标签绘制页面,

flutter 里面则是使用不同的控件来绘制页面

样式

与传统vue不同的是 flutter里面没有css/scss样式表,

Flutter的理念是万物皆为widget,Flutter 的布局依靠于控件,样式依靠于控件的属性

常用控件

Container

container是最常用的布局,是由其他好几个默认的widget组成的模板。 支持padding,margin,color,width,height ... 属性。

Padding

用来设置padding的控件。职责非常单一。 同类的还有Center(设置居中),Align等。

Column、Row、Center

最常见的横竖中心布局。

点击事件

点击执行 logic.dart 里面的方法

State.dart

用于存储页面数据,实现了数据的跨帧保存和恢复;在widget构建的时候可以被读取;在widget生命周期中发生改变;

如何遍历数组输出内容

例如:我们要展示一个列表,vue中我们通常会使用 v-for 去遍历一个数组来做展示,flutter中的写法有所变动

1、list.map(( item ) { }).toList()

2、list.asMap().map(( i , data ) => MapEntry ( i , Row() )) .values .toList(),

3、ListView.builder()

logic.dart

类似于vue2里面的 methods{} 或者vue3里面定义的方法

生命周期

@override

// 生命周期 类似于vue2-mounted() 或vue3-onMonuted()

javascript 复制代码
void onInit() {

super.onInit();

change(state, status: RxStatus.success()); // 新建一个页面的时候需要在执行一下

}

@override

void onClose() {

super.onClose();

// 销毁监听

}

eventBus的使用

枚举出监听事件的行为和触发监听需要传入的参数

一般在onInit ( )中监听

触发监听

page.dart

路由配置的时候引入

app_pages.dart : 引入page.dart

app_routes.dart : 定义路由变量

javascript 复制代码
Get.offAllNamed(Routes.LOGIN);

Get.toNamed('/${_path}', arguments: queryParams);

Get.toNamed(Routes.TAKE_PICTURE)?.then((res) {

if (res != null) { }

}});

Get.back(result: data);
相关推荐
fouryears_234179 小时前
Flutter InheritedWidget 详解:从生命周期到数据流动的完整解析
开发语言·flutter·客户端·dart
LinXunFeng14 小时前
Flutter - 详情页 TabBar 与模块联动?秒了!
前端·flutter·开源
阅文作家助手开发团队_山神17 小时前
第三章: 解决Android iPad蓝牙键盘联想词UI不跟随光标问题
flutter
阅文作家助手开发团队_山神17 小时前
第四章:Flutter自定义Engine本地依赖与打包流程
前端·flutter
程序员老刘18 小时前
Flutter 3.35 更新要点解析
flutter·ai编程·客户端
阅文作家助手开发团队_山神20 小时前
第一章: Mac Flutter Engine开发准备工作
前端·flutter
EmmaGuo201521 小时前
flutter3.7.12版本设置TextField的contextMenuBuilder的文字颜色
前端·flutter
鹏多多.1 天前
flutter-使用device_info_plus获取手机设备信息完整指南
android·前端·flutter·ios·数据分析·前端框架
来来走走1 天前
Flutter开发 网络请求
android·flutter
SoaringHeart2 天前
Flutter进阶:高内存任务的动态并发执行完美实现
前端·flutter