参考：

Qt Quick 准确的移动平台屏幕适配

qt qml 高宽自动适配android设备

QML 从无到有 （移动适配）

思路：以一个平台分辨率为基准（如320*480），考虑其与其它平台的比例因子，根据比例因子自适应调整。

仅供参考，学习笔记。

main.qml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
  

Window
{
    id : main;
    color : "white";
    visible : true
    width : (Qt.platform.os === 
    height : (Qt.platform.os ===

property bool isphone : Screen.width < Screen.height ?

//除以得到系数
;
    property real multiplierW : main.width / ;
    //计算高的函数
    function dpH(numbers)
    {
        return numbers * multiplierH;
    }
    //计算宽的函数
    function dpW(numbers)
    {

return numbers * multiplierW;
    }
    //平均值函数
    function dpX(numbers)
    {
        ;
    }

Rectangle
    {
        id : bg_rect;
        anchors.fill : parent;
        color : "#ecedf1";
        z : ;
    }

Image
    {
        anchors.top : bg_rect.top
        anchors.topMargin : width * 
        anchors.horizontalCenter : parent.horizontalCenter
        source : "qrc:/qq.png"
        width : isphone ? dpW()
        height : width
    }

Column
    {
        width : parent.width;
        height : dpH(); //运用
;
        y : dpH();

TextField
        {
            id : username_TF;
            x : ;
            y : ;
            z : ;
            width : dpW(parent.width);
            height : dpH();
            placeholderText : "QQ号/手机号/邮箱";
            style : TextFieldStyle
            {
                background : Rectangle
                {
                    color : "white";
                }
            }
        }

TextField
        {
            id : password_TF;
            x : ;
            y : dpH();
            z : ;
            width : dpW(parent.width);
            height : dpH();
            echoMode : ;
            placeholderText : "密码";
            style : TextFieldStyle
            {
                background : Rectangle
                {
                    color : "white";
                }
            }
        }

Rectangle
        {
            id : line_rect;
            color : "#eaecee";
            height : dpH();
            width : parent.width;
            x : ;
            y : dpH();
            z : ;
        }

Rectangle
        {
            id : login_button;
            anchors.left : parent.left;
            anchors.leftMargin : dpW();
            anchors.bottom : parent.bottom;
            anchors.bottomMargin : dpH();

color : "#1eb9f2";
            width : dpW();
            height : dpH();
            radius : dpX();
            border.color : "#1eb9f2";
            border.width : dpX();

Text
            {
                id : login_button_text;
                anchors.centerIn : parent;
                color : "white";
                font.family : "微软雅黑";
                text : "登 录";
            }
        }
    }
}

IOS模拟器运行截图：

QML 移动端适配一个参考思路的更多相关文章

  1. web前端--移动端适配总结

    转自:https://segmentfault.com/a/1190000011586301 作者:Devinnn meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码: < ...

  2. web开发中移动端适配

    这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮 ...

  3. mui初级入门教程（六）— 模板页面实现原理及多端适配指南

    文章来源:小青年原创发布时间:2016-07-26关键词:mui,webview,template,os,多端适配转载需标注本文原始地址: http://zhaomenghuan.github.io. ...

  4. 移动端适配-rem（新）

    概念 对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 移动端像素 设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单 ...

  5. Web移动端适配总结

    移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...

  6. 小tips：使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

  7. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

  8. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

  9. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

随机推荐

  1. 201871010128-杨丽霞《面向对象程序设计（java）》第十六周学习总结

    201871010128-杨丽霞<面向对象程序设计(java)>第十六周学习总结(1分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-dai ...

  2. HTML与CSS学习笔记(1)

    1.web三大核心技术? HTML CSS JavaScript 2.HTML基本机构和属性 HTML:超文本 标记 语言 超文本:文本内容+非文本内容(图片.视频.音频等) 标记:<单词> ...

  3. Python查看帮助---help函数

    查看所有的关键字:help("keywords") 查看所有的modules:help("modules") 单看所有的modules中包含指定字符串的modu ...

  4. USACO Telephone Lines

    洛谷 P1948 [USACO08JAN]电话线Telephone Lines https://www.luogu.org/problem/P1948 JDOJ 2556: USACO 2008 Ja ...

  5. 前端css命名规范----BEM

    一.什么是BEM BEM就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法可以使css类对其他开发者来说更加透明 ...

  6. Spring Boot 2.2.0，性能提升+支持Java13

    随着 Spring Framework 5.2.0 成功发布之后,Spring Boot 2.2 也紧跟其后,发布了第一个版本:2.2.0.下面就来一起来看看这个版本都更新了些什么值得我们关注的内容. ...

  7. [LeetCode] 454. 4Sum II 四数之和之二

    Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l) there are such t ...

  8. [LeetCode] 40. Combination Sum II 组合之和之二

    Given a collection of candidate numbers (candidates) and a target number (target), find all unique c ...

  9. 使用Windows的Linux子系统搭建嵌入式开发环境

      亲,都9102年了,还在用VMware跑嵌入式交叉编译链吗?   北京时间2019年6月13日,Windows 10发布预览版本18917.版本的主要功能是Linux子系统(windows sub ...

  10. 记一次难忘的排错debug经历（找了5天左右）（涉及内存覆盖）

    strcpy和memcpy都没有处理内存覆盖问题. 函数描述 The memcpy function copies count bytes of src to dest. If the source ...