flutter 屏幕适配方案自定义单位 rpx px

最新推荐文章于 2024-08-07 08:23:29 发布
最新推荐文章于 2024-08-07 08:23:29 发布
阅读量3.5k 收藏 4
点赞数 1
分类专栏： flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsp13270124/article/details/105944915
版权

屏幕适配

现在我们来搞几个模拟器 iphone 5 6 6+ 其他的东西来使用这个

class HYHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("物理宽度高度 ${HYSizeFit.physicalWidth} * ${HYSizeFit.physicalHeight}");
    return Scaffold(
      appBar: AppBar(
        title: Text("title")
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          color: Colors.red,
          child: Text("hello world", style: TextStyle(fontSize: 20)),
        )
      ),
    );
  }
}

image

但是我们这只是在小屏幕的iphone上面可以放下

如果我们到 iphone5上面说不定就不行了 他是比较小的

如果我们这里也给他搞一个200 * 200 说不定就不行了 这个时候 如果站的比较多了 这个时候 可能就会报一些错了

所以我们希望你在iphone5 上面 放的小一点 然后再iphone 6 + 上面放的大一点

但是现在如果跑在这些机器上面那他们的距离因该都是200 * 200 这个大小现在是写死的

其实在前端里面对这个东西的适配已经有很多的经验了 所以我们这里借助前端的方案来适配

前端的方案有三种

  • rem

    • 这个东西的方式是 给更标签设置一个字体大小
    • 其他的设置一个字体大小 其他的标签在设置的时候 它就会根据这个字体大小作为单位

  • vw vh

    • 将屏幕分成100 等分 一个vw就是屏幕宽度的1%
    • 其他的所有的单位都使用 vw或者vh

  • rpx

    • 这个是小程序的适配方案 这个东西就是一个可相应的东西
    • 这个东西是 以iphone 6为设计稿
      • 如果我们使用 400 * 400 的时候在iphone 6 上面就是一个200 * 200
      • 如果我们变到到比较的小的上面 这里我们用 400 * 400 它就是 400 * 0.42 作为它的宽度来使用的 这个.42怎么算出来的 是可以 168 这里它就会对这个做一个拉伸
      • 这里我们不管你什么屏幕 我都把你分成 750等份 这个时候iphone 6 就是 0.5 375 / 750
      • iphone 5是 320 / 750 iphone 6+ 414 / 750 0.552
      • 所以这个小程序就和 vw vh差不多 但是它是将屏幕分的更多

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DOFF10Wx-1588730835300)(7D1F9CFD54744C1D8B7B264C101E5861)]
    那我们怎么做这个适配呢 我们来到size_fit 里面 新建一个属性rpx 然后通过这些东西计算出 rpx

import 'dart:ui';

class HYSizeFit {
  static double physicalWidth;
  static double physicalHeight;
  static double screenWidth;
  static double screenHeight;
  static double dpr;
  static double statusHeight;

  static double rpx;

  static void initialize() {
//    1. 手机的物理分辨率
    physicalWidth = window.physicalSize.width; // 拿到物理的宽度
    physicalHeight = window.physicalSize.height;

//    2. 求出dpr
    dpr = window.devicePixelRatio;
//    3. 求出逻辑的宽高
    screenWidth = physicalWidth / dpr;
    screenHeight = physicalHeight /dpr;

//    4. 状态栏高度
    statusHeight = window.padding.top / dpr;

//    5. 计算rpx
    rpx = screenWidth / 750;
  }
}

其实就是 逻辑宽度和750 的商

然后再其他的地方使用

class HYHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("物理宽度高度 ${HYSizeFit.physicalWidth} * ${HYSizeFit.physicalHeight}");
    return Scaffold(
      appBar: AppBar(
        title: Text("title")
      ),
      body: Center(
        child: Container(
          width: 200 * HYSizeFit.rpx,
          height: 200 * HYSizeFit.rpx,
          color: Colors.red,
          child: Center(
              child: Text("hello world", style: TextStyle(fontSize: 20))
          ),
        )
      ),
    );
  }
}

当然后面我们有更好的适配的写法

但是你注意一个问题就是 小程序里面 我们的是除以 750 不是375 所以我们的所有的东西 都要翻倍

class HYHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("物理宽度高度 ${HYSizeFit.physicalWidth} * ${HYSizeFit.physicalHeight}");
    return Scaffold(
      appBar: AppBar(
        title: Text("title")
      ),
      body: Center(
        child: Container(
          width: 400 * HYSizeFit.rpx,
          height: 400 * HYSizeFit.rpx,
          color: Colors.red,
          child: Center(
              child: Text("hello world", style: TextStyle(fontSize: 40 * HYSizeFit.rpx))
          ),
        )
      ),
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kli4OFy1-1588730835288)(1DD8B4AEFDFC4AFDB4C5D072423877E7)]

这样我们的大小就不一样了

但是 这个地方 * 单位的方式不是特别好些 所以我们这里搞了一个其他的东西

我们给它搞了一个静态方法来实现这个东西



import 'dart:ui';

class HYSizeFit {
  static double physicalWidth;
  static double physicalHeight;
  static double screenWidth;
  static double screenHeight;
  static double dpr;
  static double statusHeight;

  static double rpx;

  static void initialize() {
//    1. 手机的物理分辨率
    physicalWidth = window.physicalSize.width; // 拿到物理的宽度
    physicalHeight = window.physicalSize.height;

//    2. 求出dpr
    dpr = window.devicePixelRatio;

//    3. 求出逻辑的宽高
    screenWidth = physicalWidth / dpr;
    screenHeight = physicalHeight /dpr;

//    4. 状态栏高度
    statusHeight = window.padding.top / dpr;

//    5. 计算rpx
    rpx = screenWidth / 750;
  }

  static double setRpx(double size) {
    return size * rpx;
  }
}

使用

class HYHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("物理宽度高度 ${HYSizeFit.physicalWidth} * ${HYSizeFit.physicalHeight}");
    return Scaffold(
      appBar: AppBar(
        title: Text("title")
      ),
      body: Center(
        child: Container(
          width: HYSizeFit.setRpx(400),
          height: HYSizeFit.setRpx(400),
          color: Colors.red,
          child: Center(
              child: Text("hello world", style: TextStyle(fontSize: HYSizeFit.setRpx(40)))
          ),
        )
      ),
    );
  }
}

但是如果我们这里还是使用这个rpx不是要翻倍吗 不是很好用 所以我们可以再搞一个单位

import 'dart:ui';

class HYSizeFit {
  static double physicalWidth;
  static double physicalHeight;
  static double screenWidth;
  static double screenHeight;
  static double dpr;
  static double statusHeight;

  static double rpx;
  static double px;

  static void initialize() {
//    1. 手机的物理分辨率
    physicalWidth = window.physicalSize.width; // 拿到物理的宽度
    physicalHeight = window.physicalSize.height;

//    2. 求出dpr
    dpr = window.devicePixelRatio;

//    3. 求出逻辑的宽高
    screenWidth = physicalWidth / dpr;
    screenHeight = physicalHeight /dpr;

//    4. 状态栏高度
    statusHeight = window.padding.top / dpr;

//    5. 计算rpx
    rpx = screenWidth / 750;
    px = rpx * 2;
  }

  static double setRpx(double size) {
    return size * rpx;
  }

  static double setPx(double size) {
    return size * px;
  }
}

这样如果ui给的是一个px 就用px 如果用的是一个rpx那就可以用 rpx

有些时候 公司不是以750 为设计稿 所以我们可以封装更加好一点

这里我们可以给这个initialize 传递一个参数 standardSize 还给他整了一个默认参数

import 'dart:ui';

class HYSizeFit {
  static double physicalWidth;
  static double physicalHeight;
  static double screenWidth;
  static double screenHeight;
  static double dpr;
  static double statusHeight;

  static double rpx;
  static double px;

  static void initialize({standardSize = 750}) {
//    1. 手机的物理分辨率
    physicalWidth = window.physicalSize.width; // 拿到物理的宽度
    physicalHeight = window.physicalSize.height;

//    2. 求出dpr
    dpr = window.devicePixelRatio;

//    3. 求出逻辑的宽高
    screenWidth = physicalWidth / dpr;
    screenHeight = physicalHeight /dpr;

//    4. 状态栏高度
    statusHeight = window.padding.top / dpr;

//    5. 计算rpx
    rpx = screenWidth / standardSize;
    px = screenWidth / standardSize * 2;
  }

  static double setRpx(double size) {
    return size * rpx;
  }

  static double setPx(double size) {
    return size * px;
  }
}

还有 一种方案是使用extension 用这个数值参数的 扩展类 然后将 这个写法继续优化

我们新建一个extensio int 这样就相当于在 int类中写东西

但是注意我们的dart是没有 隐式转换的

import "size_fit.dart";

extension IntFit on int {
  double get px {
    return HYSizeFit.setPx(this.toDouble());
  }

  double get rpx {
    return HYSizeFit.setRpx(this.toDouble());
  }
}

import 'package:learn_flutter02/day14_screenfit/shared/size_fit.dart';

extension DoubleFit on double {
//  double px() {
//    return HYSizeFit.setPx(this);
//  }
//
//  double rpx() {
//    return HYSizeFit.setRpx(this);
//  }

  double get px {
    return HYSizeFit.setPx(this);
  }

  double get rpx {
    return HYSizeFit.setRpx(this);
}
}

我梦给他增加一个 方法 来获得对应的 rpx px值

导入对应的文件使用


import "package:flutter/material.dart";
import "shared/size_fit.dart";

import "extension/double_extension.dart";
import "extension/int_extension.dart";

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//    导入文件 然后初始化
    HYSizeFit.initialize();
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashColor: Colors.transparent
      ),
      home: HYHomeScreen(),
    );
  }
}

class HYHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("物理宽度高度 ${HYSizeFit.physicalWidth} * ${HYSizeFit.physicalHeight}");
    return Scaffold(
      appBar: AppBar(
        title: Text("title")
      ),
      body: Center(
        child: Container(
          width: 400.rpx,
          height: 200.px,
          color: Colors.red,
          child: Center(
              child: Text("hello world", style: TextStyle(fontSize: 40.rpx))
          ),
        )
      ),
    );
  }
}

这种方式更加简洁

jsp13270124
关注
专栏目录
Flutter尺寸单位与适配
chuyouyinghe的专栏
09-13 3369
在实际开发的过程中，我们经常需要固定某个Widget的宽度或高度，这时我发现我该给什么值呢？不同的设备上显示结果是什么呢？带着这个问题我开始了这篇文章。 1. 官网 竟然没有。 我不知道是不是我没找到，但到目前为止我真的没找到。哪位朋友如果找到了麻烦评论里说一声。 2. 百度 文章一：flutter 屏幕适配 字体大小适配_卓原的进化之旅-CSDN博客_flutter 屏幕适配 点评： 直接给出方法来做适配了，而我的目的是了解flutter自己是如何处理尺寸单位的。 但其中的一句话让我有了.
flutter 屏幕尺寸适配和字体大小适配的实现
08-25
主要介绍了flutter 屏幕尺寸适配和字体大小适配的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
flutter 尺寸单位,逻辑分辨率
最新发布
tangshangkui的专栏
08-07 444
2.很多讲手机分辨率的教程都标注 @1x @2x @3x 所以潜意识的一位 1080*1920 @3x的手机的逻辑分辨率是360.一直以来被flutter默认单位所迷惑,虽然不需要搞懂也不影响写代码,但是还是想要搞清楚.所以flutter的单位就是手机的逻辑分辨率=h5页面的1px,h5页面为了兼容性取整了,这个值应该是设备提供的.3.flutter中测试出来的宽度为小数.之所以被迷惑有以下原因。Iphone的数据来源。1.官方没有明确说明。我自己测试得到的数据。
flutter 屏幕尺寸适配 字体大小适配，实战解析
03-23 1214
写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于Flutter的学习思路及方向，从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的点击我的GitHub免费获取。
flutter rpx屏幕适配方案
wilL-my的博客
01-30 2273
rpx是小程序中的适配方案，它将750px作为设计稿，1rpx=屏幕宽度/750，其它所有的单位都使用rpx单位。 不管是什么屏幕，统一分成750份 在iPhone8上： 1rpx = 375/750 = 0.5px 在iPhone12proMax 上：1rpx = 428/750 = 0.571px 所以我们就可以通过上面的计算方式，算出一个rpx，再将自己的size和rpx单位相乘即可： 比如300px的宽度：3002rpx 在iPhone8上计算出的结果是300px 在在iPhone12pr
Flutter中屏幕自适应(iPhone iPad Windows)
weixin_52277780的博客
05-11 2535
Flutter中屏幕自适应(iPhone iPad Windows)
Flutter：屏幕适配
weixin_41897680的博客
08-09 4498
Flutter：屏幕适配
Flutter 不同终端适配方案
01-12
本文将介绍 Flutter 不同终端适配方案，并提供一个自定义适配类的实现方法。 一、常见手机的分别率 在了解 Flutter 适配方案之前，我们需要了解常见手机的分别率。苹果手机的分别率有多种，例如苹果 6 的分辨率是 ...
Flutter屏幕适配
闪亮的大早的博客
10-22 2567
的物理像素 ，有的也叫分辨率 是 750x1334 ，这个指的是像素pixel，单位是px,UI设计出的图，单位就可能是px值。地址：https://github.com/OpenFlutter/flutter_screenutil。没有传入单位，此时其实用的是单位是pt，也就是point，点的概念。的 devicePixelRatio 等于2，这是怎么来的呢？在Flutter中可以通过 window 来获取。点事抽象的单位，它们只在逻辑坐标系上有意义。在刚开始，所有的图形位置都由坐标点指定。
Flutter入门与实战：屏幕适配和字体大小
09-19
总之，Flutter通过`MediaQuery`、`TextScaleFactor`、`TextTheme`以及自定义扩展方法等方式，为开发者提供了灵活的屏幕适配和字体大小管理手段。掌握这些技术，可以使你的Flutter应用在各种设备上都有出色的视觉体验...
Flutter屏幕自适应像素封装
qq_42612091的博客
04-29 418
import 'dart:ui'; import 'package:flutter/material.dart'; //自适应屏幕 class ScreenAadpt { //第一步 获取设备对象属性 static MediaQueryData mediaQuery = MediaQueryData.fromWindow(window); static double screenwidth; //设备屏幕宽度width static double screenheight; //设备屏幕
【Flutter】 Material 3 详解（二）自适应屏幕设计 独立开发者应该学的设计标准
Code Metaverse
09-24 304
在现代的界面设计中，布局是至关重要的。它不仅决定了用户如何与界面互动，还影响了用户的整体体验。M3屏幕尺寸系统为设计师和开发者提供了一套全面的布局指南，帮助他们创建一致且高效的界面。
跟我学企业级flutter项目：如何将你的项目简单并且快速屏幕自适应
s297165331的专栏
05-16 483
你的flutter在小屏幕手机上出现文字丢失了么？ 你的flutter应用在小屏幕手机上排版出错了么？ 你的flutter应用在大屏幕手机上布局错乱了么？ 你在用flutter_screenutil做屏幕自适应么？ 今天我来给大家介绍一款简单不侵入代码的自适应。 如果你有如下需求： 1. 旧的flutter想快速屏幕适应各种手机 2. 页面代码中不想增加关于适配屏幕的代码
Flutter屏幕适配的三种方案
金戈鐡馬
03-05 4419
做移动端开发的同学都知道，针对不同型号和尺寸的手机要进行页面的适配，且 iOS 和 Android 适配方案各不相同，那我们用 Flutter 开发要怎么处理屏幕适配呢？Flutter使用的是类似于iOS中的点pt，也就是point。我们经常说 iPhone8 的尺寸是375x667，但是它的分辨率其实是 750x1334 。因为iPhone8的像素比（devicePixelRatio）是2.0，iPhone8plus的像素比是3.0。
flutter大小单位：dp
热门推荐
超频化石鱼的博客
03-14 1万+
手机的屏幕使用点来表示。例如，手机分辨率为720×1280，代表 分辨率为720×1280：宽为720个点，高为1280个点。 dpi为320：每英寸物理屏幕上的点个数为320个点。 160dpi的手机每英寸有160个点，320dpi的手机每英寸有320个点。于是，320dpi的每个点的尺寸是160dpi每个点的一半。即320dpi的设备，每个点的尺寸更小。 于是，一个5寸的160dpi手机宽...
Flutter跨终端屏幕适配与自定义解决方案详解
"本文档主要探讨了Flutter跨终端屏幕适配的解决方案，特别是在构建类似小米商城APP的项目时，如何应对不同设备的分辨率和UI设计挑战。首先，作者列举了苹果系列手机从iPhone 6到苹果14的各种分辨率，包括旧款和新款...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值