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

如果想实现websocket，可以使用web_socket_channel插件。https://pub.dev/packages/web_socket_channel

flutter屏幕适配方案：flutter_screenutil

抽离出一个工具类：screenAdapter.dart

import 'package:flutter_screenutil/flutter_screenutil.dart';

class ScreenAdapter {
  static width(num value) {
    return value.w;
  }

  static height(num value) {
    return value.h;
  }

  static fontSize(num value) {
    return value.sp;
  }
}

状态栏就是手机顶部显示时间、手机信号、wifi信号、电池的那一行。

调用接口获取到数据后，可以利用https://javiercbk.github.io/json_to_dart/快速生成实体类，之后面向对象编程。

要实现瀑布流，可以使用flutter_staggered_grid_view插件。利用其中的MasonryGridView，必须配置的属性除了编译时限定的crossAxisCount(指定瀑布流有几列。如1列、2列)外，还有itemCount，用于指定元素的个数，如果不指定，那么会无穷大，页面会卡住。如果数据是从接口拉的，那么值是feeds的长度。

如果想看应用的布局情况，则可以在main.dart中引入'package:flutter/rendering.dart'，然后在return MaterialApp()上面加一行代码：debugPaintSizeEnabled = true，如此run时，就可以在设备上看到布局情况。还有很多debugXXX属性可以配置。

小米商品详情页【在页面往上滑的过程中，①顶部出现商品、详情、推荐等Tab，②拉到详情部分时，其中的商品介绍、规格参数固定到一级Tab下面成为二级Tab，拉到推荐部分时，二级Tab消失。在页面往下滑的过程中，拉到详情部分时二级Tab又出现，拉到商品部分时，二级Tab又消失】的逻辑：

①商品、详情、推荐放在一行中，该是AppBar的title。在页面往上滑，即滚动条往下滑的过程中，在一定距离内，商品、详情、推荐这些文字的透明度从0逐渐增加到1，之后一直保持1。

②商品部分、详情部分、推荐部分各是一个container，详情部分最上面是一个行，放的是商品介绍、规格参数。商品详情页有一个隐藏的浮动的行，内容是商品介绍、规格参数，距离顶部的距离是状态栏高度+appBar的高度。当页面往上滑到详情部分或是从推荐部分往下滑到详情部分时，浮动的【商品介绍、规格参数】展示出来。当页面往上滑到推荐部分时，浮动的【商品介绍、规格参数】隐藏起来。

如果商品部分container、详情部分container、推荐部分container都设置了key，那么利用globalKey.currentContext可以求得各部分container的高度及其与屏幕顶部的间距，如商品部分container的高度是gk1.currentContext?.size?.height，其与屏幕顶部的间距是(gk1.currentContext?.findRenderObject() as RenderBox) .localToGlobal(Offset.zero).dy。在scrollController的addListener()方法中对滚动条进行监听时，如果scrollController.position.pixels值增大或减小到商品部分container的高度，就说明拉到了详情部分。如果scrollController.position.pixels值增大到商品部分container的高度+详情部分container的高度，就说明拉到了推荐部分。即scrollController.position.pixels大于商品部分container的高度，小于商品部分container的高度+详情部分container的高度时，就说明展示的是详情部分，则浮动的商品介绍、规格参数】需要展示，否则需要隐藏。其实，状态栏的高度+appBar的高度+推荐部分container的高度就等于详情部分与屏幕顶部的间距，状态栏的高度+appBar的高度+推荐部分container的高度+详情部分container的高度，就等于推荐部分与屏幕顶部的间距。所以也可以通过详情部分与屏幕顶部的间距、推荐部分与屏幕顶部的间距来判断展示的是否是详情部分。