美文网首页Flutter
Flutter尺寸单位与适配

Flutter尺寸单位与适配

作者: 何林子 | 来源:发表于2019-01-06 12:42 被阅读4227次

在实际开发的过程中,我们经常需要固定某个Widget的宽度或高度,这时我发现我该给什么值呢?不同的设备上显示结果是什么呢?带着这个问题我开始了这篇文章。

1. 官网

竟然没有。
我不知道是不是我没找到,但到目前为止我真的没找到。哪位朋友如果找到了麻烦评论里说一声。

2. 百度

文章一:
https://blog.csdn.net/u011272795/article/details/82795477
点评:
直接给出方法来做适配了,而我的目的是了解flutter自己是如何处理尺寸单位的。
但其中的一句话让我有了思路:

flutter中默认组件尺寸单位都是dp,我们还要进行px->dp的操作.除以像素密度就好了.

3. 应用

既然知道了Flutter的单位是dp,那有android开发经验的人就好办了。
一个重要的参数将起到作用:

像素密度:density

3.1 如何得到设备的像素密度?

adb shell
wm density

3.2 如何得到设备的分辨率?

adb shell
wm size

3.3 如何得到设备的dp尺寸?

根据我的测试设备:Pixel C
density: 320
size: 1800*2560

计算公式:
dp值×(density/160dpi)= px值
即:
dp值 = px值 / (density/160dpi)

size宽:
1800 / (320 / 160) = 900dp
size高:
2560 / (320 / 160) = 1280dp

最终这台设备以dp为单位的分辨率是:
900dp*1280dp

4. 解决最开始的问题

我知道了我手里的设备的尺寸是宽900dp,高1280dp。
那我会很放心大胆的指定我一个Widget的宽度或高度了。
因为,通过上面的简单方法我很清楚知道这个尺寸在另一台设备上它会有多宽或多高

相关文章

  • Flutter尺寸单位与适配

    在实际开发的过程中,我们经常需要固定某个Widget的宽度或高度,这时我发现我该给什么值呢?不同的设备上显示结果是...

  • Day16 - Flutter - 屏幕适配

    概述 Flutter单位 适配方案 一、Flutter单位 1.1、Flutter中的单位在进行Flutter开发...

  • Flutter:适配学习

    flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! Flutter的适配可以使用flu...

  • Android屏幕适配

    屏幕适配相关概念主流适配方案 一、屏幕适配相关概念 1、屏幕尺寸单位:英寸表示:手机对角线的物理尺寸 2、屏幕分辨...

  • 知识点梳理7 必备必会

    屏幕适配 android 适配笔记 屏幕尺寸含义:手机对角线的物理尺寸单位:英寸(inch),1英寸=2.54cm...

  • android 适配笔记

    ps: 适配啊对于 Android 来说永远不会过时 相关概念 屏幕尺寸 含义:手机对角线的物理尺寸 单位:英寸(...

  • android屏幕适配知识点

    屏幕适配的相关概念: 1.什么是屏幕尺寸,屏幕尺寸分辨率,屏幕像素密度 屏幕尺寸指屏幕的对角线的长度,单位:英寸 ...

  • iOS 适配iPhone XR/XS/XS MAX

    适配只看三个参数 1.渲染像素--屏幕截图的图片尺寸,单位px2.逻辑像素--程序员开发所用尺寸,单位pt3.倍率...

  • flutter 屏幕尺寸适配 字体大小适配

    前言:现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计...

  • flutter屏幕适配和尺寸约束

    1,flutter组件尺寸是dp https://www.jianshu.com/p/2ba69115f974 2...

网友评论

    本文标题:Flutter尺寸单位与适配

    本文链接:https://www.haomeiwen.com/subject/nbqsrqtx.html