参考：

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. P4677 山区建小学|区间dp

    P4677 山区建小学 题目描述 政府在某山区修建了一条道路,恰好穿越总共nn个村庄的每个村庄一次,没有回路或交叉,任意两个村庄只能通过这条路来往.已知任意两个相邻的村庄之间的距离为di 为了提高山区 ...

  2. 使用 HuTool时候,遇到Cannot add merged region A1:C1 to sheet because it overlaps with an existing merged region (A1:C1).

    java.lang.IllegalStateException: Cannot add merged region A1:C1 to sheet because it overlaps with an ...

  3. LeetCode 654. Maximum Binary Tree最大二叉树 (C++)

    题目: Given an integer array with no duplicates. A maximum tree building on this array is defined as f ...

  4. 了解html标签

    <title></title> 1.网页标题 2.当我们收藏网页时,默认标题就是网页标题 3.seo(搜索引擎优化) <h1></h1>~<h6& ...

  5. [LeetCode] 763. Partition Labels 分割标签

    A string S of lowercase letters is given. We want to partition this string into as many parts as pos ...

  6. [LeetCode] 378. Kth Smallest Element in a Sorted Matrix 有序矩阵中第K小的元素

    Given a n x n matrix where each of the rows and columns are sorted in ascending order, find the kth ...

  7. 屏蔽flash地区识别

    host文件添加以下0.0.0.0 geo2.adobe.com

  8. MySQL学习记录(导入Excel表到数据库，并筛选条件输出)

    附上:重置mysql账号密码方法 ubuntu系统下mysql重置密码和修改密码操作 - skh2015java的博客 - CSDN博客(改完重启,登录mysql要root/sudo权限) Cento ...

  9. linux shell脚本中的延时

    linux shell脚本中的延时 还是使用 sleep 或usleep函数. 详细如下:     .sleep : 默认为秒. sleep 1s 表示延迟一秒   sleep 1m 表示延迟一分钟 ...

  10. Salesforce Lightning开发学习（四）重写新建/更新按钮

    重写新建/更新按钮的原因是因为项目需要用户在新建数据时从接口对数据进行校验,保证数据的有效性,同时获取接口返回的部分数据完成信息填充,而Sales force的trigger仅支持@future方法异 ...