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);