Flutter踩坑记录

source/_posts/flutter/Flutter踩坑记录.md

@@ -0,0 +1,106 @@
+---
+title: Flutter踩坑记录
+date: 2019-11-30 22:31:53
+tags: 
+  - flutter
+  - dart
+categories: 
+  - flutter
+---
+
+### 数据绑定
+使用`setState`方法对底层数据进行修改并且动态渲染视图
+比如需要从接口获取数据显示到页面当中
+<!-- more -->
+
+```dart
+Response response = await http.get('common/items');
+setState((){
+  this.loading = false;
+  this.items = response.data;
+});
+```
+采用这种方式进行赋值才可以执行动态绑定
+否则不会进行视图的重新渲染
+该方法继承自抽象类`State`
+
+### 获取屏幕的尺寸
+```dart
+final Size screenSize = MediaQuery.of(context).size;
+```
+Size对象当中包含width和height属性，可以用于根据屏幕的高度控制控件的大小
+
+### 下拉刷新与滚动更新
+下拉刷新直接使用`RefreshIndicator`控件包装
+当滚动到顶部并且进行下滑动作时就可以执行指定方法
+```dart
+RefreshIndicator(
+  onRefresh: (){
+    return http.get('common/photos').then((response) {
+      setState((){
+        this.loading = false;
+        this.items = response.data
+      });
+    });
+  },
+  child: Container(/*省略内部子组件代码*/),
+),
+```
+需要注意的是`onRefresh`函数的返回值必须是`Future<void>`类型，用于执行异步回调
+
+**滚动更新**需要给组件绑定`ScrollController`
+并且在组件初始化时绑定滚动监听
+```dart
+// 滚动控制器
+ScrollController _scrollController = ScrollController();
+
+ListView(
+  controller: this._scrollController,
+),
+// 省略其他代码...
+
+@override
+void initState() {
+  super.initState();
+  _scrollController.addListener(() { // 绑定滚动监听事件
+    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
+      // TODO 滚动到底部需要执行的操作
+    }
+  });
+}
+```
+
+### 区分开发环境与生产环境
+```dart
+bool.fromEnvironment('dart.vm.product');
+```
+true代表是生产环境，false代表开发环境
+
+### 弹性布局
+Flutter也实现了类似于CSS当中的flex弹性容器布局
+可以按照比例分配子元素的宽度或高度
+```dart
+Flex(children: <Widget>[
+  Expanded(
+    flex: 1,
+    child:Text('内容', style: TextStyle(fontSize: 18), textAlign: TextAlign.center)
+  ),
+  Expanded(
+    flex: 4,
+    child: TextFormField(
+      validator: (v) {
+        return v.trim().isNotEmpty ? null : '必须输入内容';
+      },
+      onChanged: (value) {
+        this.fromData['content'] = value;
+      },
+    ),
+  )
+],
+direction: Axis.horizontal
+)
+```
+这是一个常规的表单项的结构，分为一个标题和一个输入框
+并且指定子元素排列方向为横向
+两者的宽度之比为1:4
+