参考：

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高阶---浏览器内核

    不同浏览器的内核,不太一样 360双核切换机制 一般涉及到金钱交易时,会切换到Trident内核,因为IE内核安全性较稳 不涉及金钱利益时,则会使用webkit内核 (1)内核是由很多模块构成 注意: ...

  2. 201871010109-胡欢欢《面向对象程序设计（java）》第八周学习总结

    博文正文开头:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...

  3. 201871020225-牟星源《面向对象程序设计（java）》第十六周学习总结

    201871020225-牟星源<面向对象程序设计(java)>第十六周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  4. Laravel 推荐-基础入门+实战+拓展视频教程

    1.laravel基础 1.Composer:类库管理神器 - Laravel的安装和配置 2.路由:地址和方法的小媒人 - 基础路由 3.控制器:管家婆 - 基础用法 4.视图:最终结果输出 5.b ...

  5. mac 下使用shell 命令 jq 解析json

    官网 https://stedolan.github.io/jq/download/ 安装 brew install jq 创建json文件,file.json { , "msg" ...

  6. tomcat 指定（自定义）JDK路径的两种方式

      1.情景展示 tomcat7使用jdk1.7:tomcat8使用jdk1.8.两个tomcat在一台机器下同时启动,你会发现这两个tomcat使用的是一个版本的jdk, 那就是你配置过的JAVA_ ...

  7. Ubuntu 14.04 apt-get update失效解决（转）

    现象如下: VirtualBox:~$ sudo apt-get update Err http://mirrors.aliyun.com trusty InRelease Err http://mi ...

  8. 分布式事物解决方案－TCC

    分布式框架下,如何保证事物一致性一直是一个热门话题.当然事物一致性解决方案有很多种(请参考:分布式事物一致性设计思路),我们今天主要介绍TCC方案解决的思路.以下是参与设计讨论的一种解决思路,大家有问 ...

  9. Azure Devops (VSTS) Extensions 开发小记

    我在使用tfx-cli打包Azure Devops插件时,输出了很黄很黄很亮瞎眼的(尤其是在Visual Studio Code采用了Dark Black Theme的情况下)警告warning: P ...

  10. Kubernetes ingress 上传文件大小限制

    1.文件太大 413:Request Entity Too Large 创建 ingress 时添加 annotations(注释) metadata: annotations: nginx.ingr ...