Flutter 网络页面心得

1.将网络数据转化模型数据

创建模型类

class Chat {

  final String name;

  final String message;

  final String imageUrl;

  const Chat({required this.name, required this.message, required this.imageUrl});

  factory Chat.formMap(Map map) {

    return Chat(

      name: map['name'],

      message: map['message'],

      imageUrl: map['imageUrl'],

    );

  }

}

加载网络数据

Future> getDatas() async {

    _cancelConnect = false;

    final url =

        Uri.parse('网络请求');

    //发送请求

    final response = await http.get(url);

    if (response.statusCode == 200) {

      //获取响应数据,转成Map类型

      final responsBody = json.decode(response.body);

      //map 作为List的遍历方法。

      List chatList = responsBody['chat_list']

          .map((item) => Chat.formMap(item))

          .toList();

      return chatList;

    } else {

      throw Exception('statusCode:${response.statusCode}');

    }

  }

json.decode 解析返回的json数据， responsBody['chat_list'] 通过map 函数生成 List类型的数组。注意map()要指定 返回的类型是Chat，(不然会解析成dynamic类型的)

使用 await 和async 表示getDatas这个方法是异步的

加载UI页面

可以使用 FutureBuilder() 完成，但直接在build 方法中通过属性 更加灵活

定义数组

List _datas = [];

在initState 方法中赋值数组，通过 setState 更新页面

//获取网络数据

    getDatas()

        .then((List datas) {

        // _cancelConnect 自己定义属性 ，更灵活控制 网络数据的加载

          if (!_cancelConnect) {

            setState(() {

              _datas = datas;

            });

          }

        })

        .catchError((e) {

          _cancelConnect = true;

          print(e);

        })

        .whenComplete(() {

          print('完毕！');

        })

2. 缓存底部Tabbar页面和数据

将Tabbar 所用对应的页面，放在widget 树里面

通过 PageView 组件 和 PageController 的配合

缓存Tabbar 单个页面的数据和状态

继承 AutomaticKeepAliveClientMixin 混合

class _ChatPageState extends State with AutomaticKeepAliveClientMixin

重写AutomaticKeepAliveClientMixin的方法

@override

  bool get wantKeepAlive => true;

在build 方法中添加 super.build(context); 代码