flutter第七篇：学习大地老师《Flutter仿小米商城实战》笔记1

TextField表示文本框。文本框默认只有底部边框，如果想变成四边形的框，需要利用其decoration属性，指定其值为InputDecoration实例，指定InputDecoration实例的border属性值为OutlineInputBorder实例。如果想要有placeholder，则需利用InputDecoration实例的hintText属性。如果想让文本框有初始值，则需要利用其controller属性，controller属性是个TextEditingController实例。在xxxState类中定义一个TextEditingController实例，在initState方法中实例化，在dispose中销毁。通过TextEditingController实例的text属性获取文本框里面的值。如果想让TextField与上下左右有点距离，可以用Padding包裹。

单选框用radio、radioListTile组件，复选框用checkbox、checkboxListTile组件。radio就是一个单选框，不包含框前面的文本，文本需要Text。 而radioListTile可以利用其title属性放文本。radioListTile独占一行，文本和复选框两边对齐。多个radioListTile放在一个Row中会报错。checkbox、checkboxListTile同理。

CircularProgressIndicator表示转圈圈的进度条，LinearProgressIndicator表示从左到右的横线进度条，可以利用color属性和backgroundColor属性设置已完成进度的颜色和未完成进度的颜色，利用value设置已完成进度的值。CupertinoActivityIndicator表示苹果专用的菊花形状的进度条，使用时需要引入cupertino.dart，可以利用radius设置菊花的半径，利用color设置菊花的颜色。

FutureBuilder是一个预置的StatefulWidget，可以用来监听Future的执行状态，实现当拉取远程数据时页面显示转圈圈进度条，拉到数据后展示数据的效果。

Center(
          child: FutureBuilder(
              future: loadData(),
              builder: (context, snapshot) {
                print(snapshot.connectionState);
                if (ConnectionState.done == snapshot.connectionState) {
                  if (snapshot.hasError) {
                    return Text("我是错误信息:${snapshot.error}");
                  } else {
                    return ListView(
                      children: snapshot.data!.map((e) {
                        return ListTile(title: Text("${e["title"]}"));
                      }).toList(),
                    );
                  }
                } else {
                  return const CircularProgressIndicator();
                }
              }))

上例中，loadData()是一个用async修饰、返回Future<List>的方法。

  Future<List> loadData() async {
    await Future.delayed(const Duration(seconds: 3));
    var rsp = await Dio().get("https://jdmall.itying.com/api/pcate");
    return rsp.data["result"];
  }

StreamBuilder也是一个预置的StatefulWidget，用来监听Stream的数据。可以实现持续刷新。

 Center(
          child: StreamBuilder(
              stream: loadStreamData(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.active) {
                  if (snapshot.hasError) {
                    return Text("something wrong:${snapshot.error}");
                  }
                  return Text("${snapshot.data}");
                } else {
                  return CircularProgressIndicator();
                }
              }))

上例中，loadStreamData()方法是一个返回Stream<int>的方法。没有其他任何关键字修饰。

  Stream<int> loadStreamData() {
    return Stream.periodic(Duration(seconds: 5), (v) {
      return v;
    });
  }

每5s吐一个数，从0开始。

利用InkWell可以给任意组件添加点击事件，如单击、双击。

日期类DateTime，时间类TimeOfDay。showDatePicker展示日期选择控件，showTimePicker展示时间选择控件。控件默认是英文，可以配置国际化来展示中文。

利用json.encode(m)来把对象转成字符串，用json.decode(s)来把字符串转成Map。使用时需要import 'dart:convert';

利用dio包可以发起http请求。https://pub.dev/packages/dio

sleep：await Future.delayed(const Duration(seconds: 5));