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的高度,就等于推荐部分与屏幕顶部的间距。所以也可以通过详情部分与屏幕顶部的间距、推荐部分与屏幕顶部的间距来判断展示的是否是详情部分。

posted on   koushr  阅读(46)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
点击右上角即可分享
微信分享提示