参考：

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. 201871010110-李华《面向对象程序设计（java）》第八周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  2. 基于 Docker 的 MySQL 主从复制搭建

    出处:https://www.jianshu.com/p/ab20e835a73f

  3. pikachu的xss及csrf

    一.XSS 可解析的js 未经过滤 XSS见框就插     script 大小写  中间插入 <img src="" onerror="alert(11111)&q ...

  4. Centos 安装Django2.1

    一.环境准备 1.1 服务器系统 Centos7 1.2.所需工具 python3(Django 2.0 版本是基于python3 版本,故而安装时需安装python3) Setuptools(> ...

  5. web框架--tornado之cookie与session初识

    cookie的本质其实就是在浏览器端保存的键值对, 每当浏览器端发送一次请求, 都会将这些键值对附加在请求中并发送给服务器端. 一.目录结构 二.main_pro.py #!/usr/bin/env ...

  6. 题解 P3620 【[APIO/CTSC 2007]数据备份】

    直接贪心(每次选最小)的话显然不对...样例都过不了... 选两个办公楼的时候,显然不能跨越另一个楼,这样不优... 于是 先把原数列处理成n-1个的数(每一个办公楼和上一个的距离),存在a[]中 题 ...

  7. SpringBoot集成Spring Security（1）——入门程序

    因为项目需要,第一次接触 Spring Security,早就听闻 Spring Security 功能强大但上手困难,学习了几天出入门道,特整理这篇文章希望能让后来者少踩一点坑(本文附带实例程序,请 ...

  8. python接口自动化1-http协议简介

    前言 知道接口测试的小伙伴都应清楚http协议了,如果你还不清楚,那么接口测试做不好,自动化接口就更做不好了.那么做接口测试前先了解下http: HTTP协议(HyperText Transfer P ...

  9. Navicat 连接远程数据库报错：1130 - Host "XX.XX.XX.XX" is not allowed to connect to this MySQL server

    Navicat 连接远程数据库报错:1130 - Host "XX.XX.XX.XX" is not allowed to connect to this MySQL server ...

  10. WindowsServer -------------部署软件

    1.windowsServer 中创建 lls 在服务器中创建lls       参考 将文件扩展名调出 2.安装数据库 将数据库传递到服务器中 安装sqlserver 数据库 3.在系统中创建文件存 ...