import QtQuick 2.4

Item {

    property var targetItem: parent

    property bool fixedAspectRatio: true // Else zoom from width and height

    property bool accordingToX: true // Else according to center

    property var targetItemGeometry

    property var childrenItemGeometry

    property bool isBegin: false

    function begin() {

        targetItemGeometry = new Object;

        targetItemGeometry["width"] = targetItem.width;

        targetItemGeometry["height"] = targetItem.height;

        var children = targetItem.children;

        var data = new Array;

        for(var index = 1; index < children.length; index++)

        {

            var currentItem = children[index];

            var buf = new Object;

            buf["item"] = currentItem;

            buf["x"] = currentItem.x;

            buf["y"] = currentItem.y;

            buf["centerX"] = currentItem.x + (currentItem.width / 2);

            buf["centerY"] = currentItem.y + (currentItem.height / 2);

            buf["width"] = currentItem.width;

            buf["height"] = currentItem.height;

            data.push(buf);

        }

        childrenItemGeometry = data;

        isBegin = true;

    }

    function resize() {

        if(isBegin)

        {

            var horizontalRatio, verticalRatio;

            horizontalRatio = targetItem.width / targetItemGeometry["width"];

            verticalRatio = targetItem.height / targetItemGeometry["height"];

            for(var index = 0; index < childrenItemGeometry.length; index++)

            {

                if(fixedAspectRatio)

                {

                    if(horizontalRatio > verticalRatio)

                    {

                        childrenItemGeometry[index]["item"].width  = childrenItemGeometry[index]["width"] * verticalRatio;

                        childrenItemGeometry[index]["item"].height = childrenItemGeometry[index]["height"] * verticalRatio;

                    }

                    else

                    {

                        childrenItemGeometry[index]["item"].width  = childrenItemGeometry[index]["width"] * horizontalRatio;

                        childrenItemGeometry[index]["item"].height = childrenItemGeometry[index]["height"] * horizontalRatio;

                    }

                }

                else

                {

                    childrenItemGeometry[index]["item"].width  = childrenItemGeometry[index]["width"] * horizontalRatio;

                    childrenItemGeometry[index]["item"].height = childrenItemGeometry[index]["height"] * verticalRatio;

                }

                if(accordingToX)

                {

                    childrenItemGeometry[index]["item"].x = childrenItemGeometry[index]["x"] * horizontalRatio;

                    childrenItemGeometry[index]["item"].y = childrenItemGeometry[index]["y"] * verticalRatio;

                }

                else

                {

                    childrenItemGeometry[index]["item"].x = childrenItemGeometry[index]["centerX"] * horizontalRatio - (childrenItemGeometry[index]["item"].width / 2);

                    childrenItemGeometry[index]["item"].y = childrenItemGeometry[index]["centerY"] * verticalRatio - (childrenItemGeometry[index]["item"].height / 2);

                }

            }

        }

    }

    Component.onCompleted: {

        begin();

    }

    Component {

        id: connections

        Connections {

            target: targetItem

            onWidthChanged: {

                resize();

            }

            onHeightChanged:

            {

                resize();

            }

        }

    }

    Loader {

        Component.onCompleted: {

            sourceComponent = connections;

        }

    }

}

  

qml : qml控件自适应;的更多相关文章

  1. 【IOS界面布局】横竖屏切换和控件自适应(推荐)

    [IOS界面布局]横竖屏切换和控件自适应(推荐) 分类: [MAC/IOS下开发]2013-11-06 15:14 8798人阅读 评论(0) 收藏 举报 横竖屏切换 自适应 第一种:通过人为的办法改 ...

  2. C# WinForm窗体及其控件自适应各种屏幕分辨率

    C# WinForm窗体及其控件自适应各种屏幕分辨率 一.说明  我们自己编写程序的界面,会遇到各种屏幕分辨率,只有自适应才能显的美观.实际上,做到这点也很简单,就是首先记录窗体和它上面控件的初始位置 ...

  3. C# Winform窗体和控件自适应大小

    1.在项目中创建类AutoSizeForm AutoSizeForm.cs文件代码: using System; using System.Collections.Generic; using Sys ...

  4. QML常用控件

    这里的控件是显示的元素 1.Item:一切的基类 Item { Image { source: "tile.png" } Image { x: width: height: sou ...

  5. Winfon 页签切换及窗体控件自适应

    由于公司的业务调整,最近不仅开发bs,还有不熟悉的cs,人手也不足,项目还多,对于cs来说,算是小白,虽然是一个人,也是硬着头皮写,拖拽控件,自定义控件.一个项目下来,对cs有了很深的认识,这里好好感 ...

  6. Winform窗体控件自适应大小

    自己写的winform窗体自适应大小代码,代码比较独立,很适合贴来贴去不会对原有程序造成影响,可以直接继承此类或者把代码复制到自己的代码里面直接使用 借鉴了网上的一些资料,最后采用重写WndProc方 ...

  7. C#(winform)实现不同DPI控件自适应1

    1. PicBox控件 顺便一提关键字:stretch [stretʃ] vt. 伸展,张开 //控制pictureBox图片的显示格式 this.picClose.BackgroundImageLa ...

  8. MFC的停靠窗口中插入对话框,在对话框中添加控件并做控件自适应

    单文档程序添加了停靠窗口后,可能会在停靠窗口中添加一些控件.在这里我的做法是在对话框上添加控件并布局,然后将这个对话框插入到停靠窗口中. 步骤 1.插入对话框,在对话框中放入控件(我的为树形控件),并 ...

  9. 【2017-12-06】winfrom 窗体自启最大化,控件自适应

    先将窗体windowstate属性设置为Maximized public partial class Form1 : Form { public Form1() { InitializeCompone ...

随机推荐

  1. input(type='file')上传多张照片并显示,传到后台

    以下内容为网络摘抄和实践修改所得,如有雷同,请谅解!!!! 1.首先是前端页面代码: 其中,<input type="file" id="file_input&qu ...

  2. Win32 API翻译

    这是从MSDN里面的Win32 SDK API函数.结构.通知.消息等等超过3000个.其中一半是整理自别人翻译. http://files.cnblogs.com/files/sishenzaixi ...

  3. MFC自绘菜单

    自绘控件问题多多.本文以菜单为例. ①当要使用顶层菜单资源.对话框资源.状态栏资源等这3种资源的任何一种.那么CWinApp::InitInstance函数内部必须使用LoadFrame函数来加载资源 ...

  4. CentOS7.2重置root密码的处理方法

    第一个里程碑 --在启动GRUB菜单中选择编辑选项,按键 "e" 进入编辑; 第二个里程碑 -- 大约在第16行找到 "ro" 将 "ro" ...

  5. Django 【orm】或

    方式一: q=Q() q.connection="or" q.children.append(("pk",1)) q.children.append((&quo ...

  6. Blink: How Alibaba Uses Apache Flink

    This is a guest post from Xiaowei Jiang, Senior Director of Alibaba’s search infrastructure team. Th ...

  7. kafka-rest:A Comprehensive, Open Source REST Proxy for Kafka

    Ewen Cheslack-Postava  March 25, 2015  时间有点久,但讲的还是很清楚的 As part of Confluent Platform 1.0 released ab ...

  8. 关于出现Specified VM install not found: type Standard VM, name jdk1.5.0_04问题的解决办法

    问题出现背景: 今天把原来电脑中的jdk版本由1.7换到了1.8,,重新在Eclipse中配置环境后出现了此问题 问题解决办法: 在你的项目中,选中ant文件,右键>>Run As > ...

  9. vue给不同环境配置不同打包命令

    第1步:安装cross-env 1 npm i --save-dev cross-env 第2步:修改各环境下的参数 在config/目录下添加test.env.js.pre.env.js. 修改pr ...

  10. Spring service本类中方法调用另一个方法事务不生效问题(转载)

    前些日子一朋友在需要在目标对象中进行自我调用,且需要实施相应的事务定义,且网上的一种通过BeanPostProcessor的解决方案是存在问题的.因此专门写此篇帖子分析why. 1.预备知识 aop概 ...