Flutter踩坑记录

2019-11-30 22:31:53

总字数 520

预计阅读时间 2 分钟

数据绑定

使用setState方法对底层数据进行修改并且动态渲染视图
比如需要从接口获取数据显示到页面当中

Response response = await http.get('common/items');
setState((){
  this.loading = false;
  this.items = response.data;
});

采用这种方式进行赋值才可以执行动态绑定
否则不会进行视图的重新渲染
该方法继承自抽象类State

获取屏幕的尺寸

1	final Size screenSize = MediaQuery.of(context).size;

Size对象当中包含width和height属性，可以用于根据屏幕的高度控制控件的大小

下拉刷新与滚动更新

下拉刷新直接使用RefreshIndicator控件包装
当滚动到顶部并且进行下滑动作时就可以执行指定方法

RefreshIndicator(
  onRefresh: (){
    return http.get('common/photos').then((response) {
      setState((){
        this.loading = false;
        this.items = response.data
      });
    });
  },
  child: Container(/*省略内部子组件代码*/),
),

需要注意的是onRefresh函数的返回值必须是Future<void>类型，用于执行异步回调

滚动更新需要给组件绑定ScrollController
并且在组件初始化时绑定滚动监听

// 滚动控制器
ScrollController _scrollController = ScrollController();

ListView(
  controller: this._scrollController,
),
// 省略其他代码...

@override
void initState() {
  super.initState();
  _scrollController.addListener(() { // 绑定滚动监听事件
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      // TODO 滚动到底部需要执行的操作
    }
  });
}

区分开发环境与生产环境

1	bool.fromEnvironment('dart.vm.product');

true代表是生产环境，false代表开发环境

弹性布局

Flutter也实现了类似于CSS当中的flex弹性容器布局
可以按照比例分配子元素的宽度或高度

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