Flutter笔记九之主题和适配

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，原因比较长就不写了，自己在网上搜吧 ↩