flutter简单使用案例.docx

第

flutter简单使用案例

目录flutter简单使用前言一、布局介绍二、本地图片使用三、网络数据解析四、路由使用五、插件的使用使用Flutter实现短视频上滑翻页效果前言PageView组件介绍使用示例PageController应用总结

flutter简单使用

一篇能够快速使用的介绍。

前言

快速使用flutter开发。

一、布局介绍

二、本地图片使用

1，将图片放入images文件夹下。

2，在pubspec.yaml文件中对图片进行声明，如果没有声明，运行时就会报错：Unabletoloadasset:xxx.png。

3，通过AssetImage(images/app.png),来加载本地图片。网络图片加载Iwork(http://a.jpg);

三、网络数据解析

1，json.decode()方法会将String类型数据解析成Map数据结构：MapString,dynamic,取数据的格式为object[key]。

如：Listitems=response.data[data];//response.data接口返回数据

stringname=response.data[name];

2，https://javiercbk.github.io/json_to_dart/将json数据在线生成Json实体类的地址。

使用：vardata=jsonDecode(response.toString());

varnewsBean=NewsBean.fromJson(data);

四、路由使用

1，普通跳转：

Navigator.push(context,MaterialPageRoute(builder:(BuildContextcontext)=Page()));

2，带参数跳转和接收参数:

跳转：Navigator.push(context,MaterialPageRoute(builder:(BuildContextcontext)=Page1(我是跳转时传的参数)));

接收：finalStringmessage=ModalRoute.of(context).settings.argumentsasString;

3.跳转后携带参数返回：

跳转：Futureresult=Navigator.push(context,MaterialPageRoute(builder:(BuildContextcontext)=Page2(我是跳转时传的参数)));

接收：result.then((res){

setState((){//setState是一个监听的方法res是返回来的参数

_handleMessage=res;

});});

返回：Navigator.of(context).pop(这是返回携带的参数);

五、插件的使用

/flutter/packages插件库，查找自己想要的插件。

使用Flutter实现短视频上滑翻页效果

我们在短视频应用中经常会看到不停上滑浏览下一条视频的沉浸式交互效果，这种交互能够让用户不停地翻页，直到找到喜欢的视频内容，从而营造一种不断搜寻目标的感觉，让用户欲罢不能。这种交互形式在Flutter中可以轻松使用PageView组件实现。

PageView组件介绍

PageView组件专门设计用来实现翻页效果，类定义如下：

PageView({

Keykey,

this.scrollDirection=Axis.horizontal,

this.reverse=false,

PageControllercontroller,

this.physics,

this.pageSnapping=true,

this.onPageChanged,

ListWidgetchildren=constWidget[],

this.dragStartBehavior=DragStartBehavior.start,

this.allowImplicitScrolling=false,

this.restorationId,

t