总字数 651
预计阅读时间 2 分钟
ListView提供了ListView.builder
构造方法用来动态构建列表
1 | class MyList extends StatelessWidget { |
@required
注解表示该参数是必须要传的
这里创建一个List<String>类型的属性来存放数据
调用时可以使用List.generate
这个List的命名构造方法来快速创建一个列表
比如
1 | List<String>.generate(100, (index) => 'item $index') |
网格布局
网格布局需要使用GridView
组件,类似于css当中的grid布局方式
1 | GridView.builder( |
可以得到一个网格布局SliverGridDelegateWithFixedCrossAxisCount
其实就是固定横轴元素数量的布局方式
crossAxisCount是其必传参数
还有一种是指定列宽度根据容器大小自适应的布局SliverGridDelegateWithMaxCrossAxisExtent
maxCrossAxisExtent是其必传参数
交互操作
处理手势可以使用GestureDetector
组件,它是可以添加手势的一个widget
其中包含所有的交互方式,比如触碰 长按 滑动等等
这个组件当中包含的子组件就可以响应该组件上定义的交互事件
1 | GestureDetector( |
这样点击这个Container元素的时候,就可以执行指定的函数
接口调用
Flutter项目当中根目录下有一个pubspec.yaml
文件,是对该项目的描述,以及一些依赖的引入
类似于nodejs项目的package.json文件的作用
dart的第三方模块可以到Dart Package搜索
1 | dependencies: |
之后可以在代码当中使用该模块
1 | import 'package:http/http.dart' as http; |
http.get 返回的是一个Future<String>
dart语言的执行本身也是单线程的,与js非常类似
所以也需要进行异步回调,内部包含await的函数需要声明为async
post的调用方式如下
1 | http.Response res = await http.post(url, body: params); |
JSON解析
需要引入dart:convert
模块
1 | import 'dart:convert'; |
JSON的序列化使用json.encode
即可