草庐IT

Flutter笔记九之主题和适配

CrazySteven 2023-03-28 原文

Flutter 3.0在5月12日发布了，支持六个平台，而且开始加大对游戏开发的支持，好好学习吧，发展还是蛮好的。

theme传入ThemeData(介绍些常用的)

  • brightness:亮度Brightness.light/Brightness.dark
  • colorScheme:修改主题色，次要颜色等
  • buttonTheme:Button的主题，如最小宽度,最小高度,默认背景色，内边距等(ButtonThemeData)
  • cardTheme:Card的主题，如默认背景色，阴影等(CardTheme)
  • textTheme:Text的主题，如默认字号，颜色等(TextTheme)
  • bottomNavigationBarTheme:bottomNavigationBar的主题，如颜色等
  • splashColor：水波纹颜色
  • highlightColor：点击高亮颜色
  • canvasColor:默认背景色

去掉水波纹和高亮效果

theme: ThemeData(
  splashColor: Colors.transparent,
  highlightColor: Colors.transparent
),

Theme(Widget)可以包裹Widget，作为局部的主题，使其使用不同的主题，如果不希望全部覆盖，则可传入Theme.of(context).copywith()从而更改某几项主题。

FloatingActionButton主题色的更改
Theme(
  data: Theme.of(context).copyWith(
    colorScheme: Theme.of(context).colorScheme.copyWith(
      secondary: Colors.pink
    ),
  )

darkTheme同theme传入ThemeData

物理分辨率
  • window.physicalSize.width//宽
  • window.physicalSize.height//高
通过物理分辨率/dpr获取逻辑分辨率
  • 宽 ：window.physicalSize.width/window.devicePixelRatio
  • 高： window.physicalSize.height/window.devicePixelRatio
通过物理分辨率/dpr获取状态栏及底部安全区高度
  • 状态栏高度：window.padding.top/window.devicePixelRatio
  • 底部安全区高度：window.padding.bottom/window.devicePixelRatio
逻辑分辨率(需要context初始化完成)
  • MediaQuery.of(context).size.width//宽
  • MediaQuery.of(context).size.height//高
状态栏及底部安全区高度(需要context初始化完成)
  • 状态栏高度：MediaQuery.of(context).padding.top
  • 底部安全区高度：MediaQuery.of(context).padding.bottom

适配

同小程序引入rpx单位，可以引入pt单位与原尺寸相乘即可。下面是个适配的小工具

class GCSizeFit {
  static late double screenWidth;
  static late double screenHeight;
  static late double statusHeight;
  static late double bottomHeight;
  static late double rpx;
  static late double pt;
  //传入基准手机物理宽度，默认是6s的750，单位是px,asset:@2x就传2，@3x就传3，默认是6s的2
static void initialize ({int standardWidth = 750, int asset = 2}) {
  //手机物理宽高
  final physicalWidth = window.physicalSize.width;
  final physicalHeight = window.physicalSize.height;
  //dpr
  final dpr = window.devicePixelRatio;
  //屏幕宽高
  screenWidth = physicalWidth / dpr;
  screenHeight = physicalHeight / dpr;
  //刘海及安全区域高度
  statusHeight = window.padding.top / dpr;
  //底部安全区域高度
  bottomHeight = window.padding.bottom / dpr;
  //计算rpx的大小
  rpx = screenWidth / standardWidth;
  //计算px的大小
  pt = rpx * asset;
  print('GCSizeFit{$屏幕宽: $screenWidth, 屏幕高: $screenHeight, dpr:$dpr\n'
      '刘海及安全区域高: $statusHeight, \n'
      '底部安全区域高: $bottomHeight, \n'
      'rpx: $rpx, pt: $pt}');
}

  //像素为单位的前端一般用这个
  static double setRPX(num size) {
    return rpx * size;
  }
  //蓝湖pt为单位的移动端一般用这个
  static double setPT(num size) {
    return pt * size;
  }
}
/*
* 扩展double
* 使用 123.45.px 或123.45.pt
* */
extension DoubleFit on double {
  double get px {
    return GCSizeFit.setRPX(this);
  }
  double get pt {
    return GCSizeFit.setPT(this);
  }
}
/*
* 扩展int
* 使用 123.px 或123.pt
* */
extension IntFit on int {
  double get px {
    return GCSizeFit.setRPX(this);
  }
  double get pt {
    return GCSizeFit.setPT(this);
  }
}
设备名称 屏幕尺寸 PPI Asset 逻辑分辨率 物理分辨率
13Pro Max,12Pro Max 6.7 in 458 @3x 428*926 1284*2778
13,13Pro,12,12Pro 6.1 in 460 @3x 390*844 1170*2532
12mini,13mini 5.4 in 476 @3x 375*812 1125*2436[1]
XS Max,11Pro Max 6.5 in 458 @3x 414*896 1242*2688
XR,11 6.1 in 326 @2x 414*896 828*1792
11Pro,XS,X 5.8 in 458 @3x 375*812 1125*2436
8+,7+,6s+,6+ 5.5 in 401 @3x 414*736 1242*2208
SE 3,8,7,6s,6 4.7 in 326 @2x 375 *667 750*1334

版权声明：本文为 Crazy Steven 原创出品，欢迎转载，转载时请注明出处！

  1. 官网写的是1080 * 2340，原因比较长就不写了，自己在网上搜吧 ↩

适配Fluttertd安全区li

有关Flutter笔记九之主题和适配的更多相关文章

  1. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  2. Unity Shader 学习笔记（5）Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c

  3. Tcl脚本入门笔记详解（一） - 2

    TCL脚本语言简介•TCL（ToolCommandLanguage）是一种解释执行的脚本语言（ScriptingLanguage）,它提供了通用的编程能力：支持变量、过程和控制结构；同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发，脚本编程，GUI和测试等方面。•实际上包含了两个部分：一个语言和一个库。首先，Tcl是一种简单的脚本语言，主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的，因此在某种意义上我们又可以把TCL看作C库，这个库中有丰富的用于扩展TCL命令的C\C++过程和函数，所以，Tcl是

  4. ruby-on-rails - 在暂存环境中覆盖 ActionMailer 主题 - 2

    我希望从我们的登台服务器发送的所有电子邮件的主题中都带有“[STAGING]”字样。在Rails3.2中使用ActionMailer是否有一种优雅的方式来做到这一点？ 最佳答案 这是我使用ActionMailerInterceptor找到的一个优雅的解决方案基于anexistinganswer.#config/initializers/change_staging_email_subject.rbifRails.env.staging?classChangeStagingEmailSubjectdefself.delivering_

  5. ruby-on-rails - 我应该使用哪个适用于 Ruby 的 CouchDB 适配器？ - 2

    一些我找到的选项是ActiveCouchCouchRESTCouchPotatoRelaxDBcouch_foo我更喜欢GitHub上的项目，因为这让我更容易fork和推送修复。所有这些都符合该要求。我习惯了Rails，所以我喜欢像ActiveRecord模型一样工作的东西。另一方面，我也不希望我和Couch之间太多--毕竟我使用它作为我的数据库是有原因的。最后，它们似乎都得到了相当积极的维护(couch_foo可能是个异常(exception))。所以我想这归结为(不可否认和不幸的)主观:有没有人对他们有过好的或坏的经历？ 最佳答案

  6. ruby-on-rails - 具有六边形架构和 DCI 模式的框架和数据库适配器 - 2

    我尝试用Ruby设计一个基于Web的应用程序。我开发了一个简单的核心应用程序，在没有框架和数据库的情况下在六边形架构中实现DCI范例。核心六边形中有小六边形和网络，数据库，日志等适配器。每个六边形都在没有数据库和框架的情况下自行运行。在这种方法中，我如何提供与数据库模型和实体类的关系作为独立于数据库的关系。我想在将来将框架从Rails更改为Sinatra或数据库。事实上，我如何在这个核心Hexagon中实现完全隔离的rails和mongodb的数据库适配器或框架适配器。有什么想法吗？ 最佳答案 ROM呢？(Ruby对象映射器)。还有

  7. ruby-on-rails - 使用 PostgreSQL 适配器限制 ActiveRecord 迁移 5.0 中的文本列 - 2

    我的迁移看起来像这样classCreateQuestionings现在，当我运行$rakedb:migrate:reset时，在我的db/schema.rb中看不到限制:create_table"questionings",force::cascadedo|t|t.text"body",null:falseend我做错了吗还是这是一个错误？顺便说一下，我使用的是rails5.0.0.beta3和ruby​​2.3.0p0。 最佳答案 t.text在PostgreSQL和textdoesn'tallowforsizelimits中生成

  8. 计算机网络笔记：TCP三次握手和四次挥手过程 - 2

    TCP是面向连接的协议，连接的建立和释放是每一次面向连接的通信中必不可少的过程。TCP连接的管理就是使连接的建立和释放都能正常地进行。三次握手TCP连接的建立—三次握手建立TCP连接①若主机A中运行了一个客户进程，当它需要主机B的服务时，就发起TCP连接请求，并在所发送的分段中用SYN=1表示连接请求，并产生一个随机发送序号x，如果连接成功，A将以x作为其发送序号的初始值：seq=x。主机B收到A的连接请求报文，就完成了第一次握手。客户端发送SYN=1表示连接请求客户端发送一个随机发送序号x，如果连接成功，A将以x作为其发送序号的初始值：seq=x②主机B如果同意建立连接，则向主机A发送确认报

  9. Flutter 环境变量配置和flutter doctor中的错误解决 - 2

    一、环境变量右键点击我的电脑-属性：然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量：ANDROID_HOMED:\AndroidSDK2.然后在系统变量：Path中添加一条这样的值        D:\Flutter\flutter\bin             这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量：        变量名：FLUTTER_STORAGE_BASE_URL      变量值：https://storage.flutter-io.cn        变量名：PUB_HOSTED_URL      变量

  10. ruby - 如何检查我的主题是否引发异常？ - 2

    我目前正在subject中创建一个对象，需要测试这是否会引发异常。以下代码说明了我要实现的目标:describeMyClassdodescribe'#initialize'dosubject{MyClass.new}it{is_expected.not_toraise_error(Some::Error)}endend我有一种感觉，我正在以错误的方式处理这件事。将subject设置为新对象而不创建对象两次的首选方法是什么？更新我的问题有两个。首先，这种语法不起作用:it{is_expected.not_toraise_error}但是，在itblock中使用expect确实如此(正如J

随机推荐