flutter实践整理

[zhaobinglong]

列表

横向排列的列表，利用row来实现

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Row One'),
        Text('Row Two'),
        Text('Row Three'),
        Text('Row Four'),
      ],
    );

列表项的数据一边都是动态获取的，

// 利用wrap来制作列表
Wrap(
                alignment: WrapAlignment.spaceBetween,
                spacing: 8.0, // gap between adjacent chips
                runSpacing: 4.0, // gap between lines
                children: this.randomMnemonic.map((item) => buildItem(item)).toList()
 )

[zhaobinglong]

格式化后端返回的json字符串

[zhaobinglong]

函数

// 定义一个异步的函数
// 如果函数没有return，则用void定义，future是函数的关键字，async、await是异步的关键字
  Future<void> getGasList() async {
    var data = await APPService.getGasList();
    this.setState(() {
      gasList = data;
    });
  }

[zhaobinglong]

点击事件

// 利用GestureDetector包裹需要监听点击的widget
GestureDetector(
        onTap: (){
          Xxxx
        },//写入方法名称就可以了，但是是无参的
        child: Text("dianji"),
),

[zhaobinglong]

响应式布局

// 获取屏幕宽度
MediaQueryData mediaQuery = MediaQuery.of(context);
var _screenWidth = mediaQuery.size.width;

[zhaobinglong]

数组遍历

  var newList = list.map((value){
    return value*2;
  });

// 遍历数组，原始数组被改变
    List<int> list47 = [3, 4, 1, 2, 5];
    list47.forEach((element){//遍历每个元素  此时不可add或remove  否则报错 但可以修改元素值，
      element += 1;
//      print(element);//依次输出：4   5  2  1  6
      list47[3]=0;//直接修改list对应index的值
      list47[0]=0;
    });

// 遍历数组，找到符合要求的最后一个目标元素
this.gasList.lastWhere((v) => v['checked'] == true)

// 遍历数组，找到符合要求的第一个目标元素
this.gasList.firstWhere((v) => v['checked'] == true)

[zhaobinglong]

布局组件column

// mainAxisAlignment：元素垂直方向居中对齐
mainAxisAlignment: MainAxisAlignment.center,

参考

https://www.jianshu.com/p/1d003ab6c278

[zhaobinglong]

布局组件center

Center(
        child: Text(
             "选择gas price",
             textAlign: TextAlign.center,
        ),
),

[zhaobinglong]

flutter中的异步请求

FutureBuilder

常见场景：进入页面后先loading，拿到数据后渲染页面

FutureBuilder重复渲染的问题

使用FutureBuilder，一旦state中的值有变化，FutureBuilder会被重复触发，页面重新loading，然后渲染

var _futureBuilderFuture; // 主要是生命一个变量用力来保存异步结果，不要直接给future异步函数
  @override 
void initState() {
    super.initState();

    ///用_futureBuilderFuture来保存结果，以避免不必要的ui重绘
    _futureBuilderFuture = xxx();
  }

body: FutureBuilder(
       future: _futureBuilderFuture, // 利用
       ....