总字数 520
预计阅读时间 2 分钟
数据绑定
使用setState
方法对底层数据进行修改并且动态渲染视图
比如需要从接口获取数据显示到页面当中
1 | Response response = await http.get('common/items'); |
采用这种方式进行赋值才可以执行动态绑定
否则不会进行视图的重新渲染
该方法继承自抽象类State
获取屏幕的尺寸
1 | final Size screenSize = MediaQuery.of(context).size; |
Size对象当中包含width和height属性,可以用于根据屏幕的高度控制控件的大小
下拉刷新与滚动更新
下拉刷新直接使用RefreshIndicator
控件包装
当滚动到顶部并且进行下滑动作时就可以执行指定方法
1 | RefreshIndicator( |
需要注意的是onRefresh
函数的返回值必须是Future<void>
类型,用于执行异步回调
滚动更新需要给组件绑定ScrollController
并且在组件初始化时绑定滚动监听
1 | // 滚动控制器 |
区分开发环境与生产环境
1 | bool.fromEnvironment('dart.vm.product'); |
true代表是生产环境,false代表开发环境
弹性布局
Flutter也实现了类似于CSS当中的flex弹性容器布局
可以按照比例分配子元素的宽度或高度
1 | Flex(children: <Widget>[ |
这是一个常规的表单项的结构,分为一个标题和一个输入框
并且指定子元素排列方向为横向
两者的宽度之比为1:4