当前位置: 首页 > news >正文

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

最常见的横竖中心布局。

点击事件

vue里面当我们需要触发一个点击事件的时候,我们常常给标签绑定一个@click=onClick() 事件

而 flutter 里面没有click事件,那我们如何触发一个点击事件呢?如下所示:

我们可以使用 GestureDetector( ) 控件,

GestureDetector( ) 的子组件 child:里面去添加需要触发点击的内容

GestureDetector( ) 控件 中有个点击事件 onTap:() 里面可以写你需要触发的事件

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

State.dart

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

在 vue2 里面,我们页面中的数据一般在 data(){ } 中定义,

而在 flutter 中,我们常用一个 state.dart 文件来定义我们页面中所有用到的数据,

例如:我们在 state.dart 中定义了一个 String title = ' 这是一个标题 '

在 view.dart 中使用的时候  : Text( ' ${ state.title } ' ) ;

在 logic.dart 中修改的时候:

void changeTitle () {state.title = ' 这是更改之后的标题 ',change(state , status : RxStatus.success() ) ;
}

如何遍历数组输出内容

例如:我们要展示一个列表,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()

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 : 定义路由变量

Get.offAllNamed(Routes.LOGIN);Get.toNamed('/${_path}', arguments: queryParams);Get.toNamed(Routes.TAKE_PICTURE)?.then((res) {if (res != null) { }}});Get.back(result: data);


http://www.mrgr.cn/news/66841.html

相关文章:

  • 内网项目,maven本地仓库离线打包,解决Cannot access central in offline mode?
  • sql server安装及使用全流程
  • 算法:图的相关算法
  • oracle常用查询sql
  • stm32学习4
  • 【矩阵的大小和方向的分解】
  • vue通过iframe方式嵌套grafana图表
  • python安装selenium,geckodriver,chromedriver,Selenium IDE
  • ei会议检索!智能控制、测量、信号系统等方向可投!
  • Linux(CentOS)安装 JDK
  • Nvidia突袭AI江湖!悄悄发布新模型,完爆OpenAI和Anthropic?
  • 美国最欢迎这些人!盘点10大移民美国最具优势职业!
  • 【Git】Git常用命令
  • 迅为RK3568开发板支持银河麒麟和开放麒麟系统
  • 【 院士、校长、杰青、Fellow等大咖齐聚!IEEE独立出版】第六届机器人、智能控制与人工智能国际学术会议(RICAI 2024,12月6-8日)
  • DevEco在设备上运行hap报错: Error message: The caller is not a system application
  • 【新手入门软件测试--该如何分辨前后端问题及如何定位日志--前后端问题分辨与日志定位查询问题】
  • ssm063基于SSM框架的德云社票务系统的设计与实现+vue(论文+源码)_kaic
  • wifiTrackerlib之监听wifi相关的Broadcast
  • ENSP RIP动态路由
  • 为什么beyond4二进制比较,字节数相同,但是提示却有差异
  • 前端前置——ajax
  • Java反射API与面向对象编程:当“X光机”遇上“家族相册”
  • C#语言发展历史
  • 华为eNSP:VLAN聚合
  • 纵然千万数据流逝,唯独vector长存