参考：

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. JS高阶---函数

    [问题] [主体] 1.什么是函数? ①实现特定功能 ②多条语句的封装体 ③可以重复执行的代码块 2.为什么用函数? 提高代码的复用性,提升效率 3.如何定义函数? ①函数声明定义 ②函数表达式定义③ ...

  2. openssl+vsftpd 加密验证方式

    [root@localhost ~]# rpm -q opensslopenssl-1.0.1e-48.el6.x86_64[root@localhost ~]# ldd /usr/sbin/vsft ...

  3. Socket-window通讯

    #define _WINSOCK_DEPRECATED_NO_WARNINGS #include<WINSOCK2.H> #include<STDIO.H> #include& ...

  4. pycharm写好的python项目怎么上传到github？

    话不多说,直接抛链接 Pycharm项目上传到Github

  5. jsp中for-each应用(遍历数据相乘再相加)

  6. leetcode14最长公共前缀

    class Solution { public: string longestCommonPrefix(vector<string>& strs) { ) return " ...

  7. appium--Capability的配置

    前戏 desired appium的功能是配置Appium会话,他们告诉appium服务器你想要自动化的平台的程序 Desired Capability是一组设置的键值对的集合,其中键对应设置的名称, ...

  8. js 立即调用函数 IIFE(Immediately Invoked Function Expression) 【转】

    原文链接:https://www.cnblogs.com/ming-os9/p/8891300.html JS中 (function(){...})()立即执行函数   1 (function(){. ...

  9. 运维工程师打怪升级进阶之路 V2.0

    在此之前,发布过两个版本: 运维工程师打怪升级之路 V1.0 版本发布 运维工程师打怪升级必经之路 V1.0.1 很多读者伙伴们反应总结的很系统.很全面,无论是0基础初学者,还是有基础的入门者,或者是 ...

  10. Cobalt环境搭建及 Web开发注意事项

    一.在Linux系统上搭建Cobalt运行环境 Cobalt是一款开源轻量级HTML5/CSS/JS浏览器,旨在于用最少的CPU.GPU.RAM等资源消耗提供丰富的应用程序开发.为了使前端开发者验证自 ...