├── .gitignore ├── AutoResize.qml ├── QMLAutoResize.qml ├── QMLAutoResize.qmlproject └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # This file is used to ignore files which are generated 2 | # ---------------------------------------------------------------------------- 3 | 4 | *~ 5 | *.autosave 6 | *.a 7 | *.core 8 | *.moc 9 | *.o 10 | *.obj 11 | *.orig 12 | *.rej 13 | *.so 14 | *.so.* 15 | *_pch.h.cpp 16 | *_resource.rc 17 | *.qm 18 | .#* 19 | *.*# 20 | core 21 | !core/ 22 | tags 23 | .DS_Store 24 | *.debug 25 | Makefile* 26 | *.prl 27 | *.app 28 | moc_*.cpp 29 | ui_*.h 30 | qrc_*.cpp 31 | Thumbs.db 32 | *.res 33 | *.rc 34 | /.qmake.cache 35 | /.qmake.stash 36 | 37 | # qtcreator generated files 38 | *.pro.user* 39 | 40 | # xemacs temporary files 41 | *.flc 42 | 43 | # Vim temporary files 44 | .*.swp 45 | 46 | # Visual Studio generated files 47 | *.ib_pdb_index 48 | *.idb 49 | *.ilk 50 | *.pdb 51 | *.sln 52 | *.suo 53 | *.vcproj 54 | *vcproj.*.*.user 55 | *.ncb 56 | *.sdf 57 | *.opensdf 58 | *.vcxproj 59 | *vcxproj.* 60 | 61 | # MinGW generated files 62 | *.Debug 63 | *.Release 64 | 65 | # Python byte code 66 | *.pyc 67 | 68 | # Binaries 69 | # -------- 70 | *.dll 71 | *.exe 72 | 73 | 74 | -------------------------------------------------------------------------------- /AutoResize.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Item { 4 | id:globalResize 5 | property var targetItem: parent 6 | property bool fixedAspectRatio: false // Else zoom from width and height 7 | property bool accordingToX: true // Else according to center 8 | property bool fontAccordingToMax: false 9 | property bool ifAutoResize: true 10 | property string ingnoreAll: "ingnoreAll" 11 | property string ingnoreChildren: "ingnoreChildren" 12 | //变换比例 13 | property real horizontalRatio: 1.0 14 | property real verticalRatio: 1.0 15 | property real fontRatio: 1.0 16 | 17 | property var targetItemGeometry 18 | property var childrenItemGeometry 19 | property var childrenText 20 | property real fontSizeScaleFactor: 1.0 21 | property bool isBegin: false 22 | signal resized() 23 | function begin() { 24 | var _childrenItemGeometry=new Array; 25 | targetItemGeometry = new Object; 26 | targetItemGeometry["width"] = targetItem.width; 27 | targetItemGeometry["height"] = targetItem.height; 28 | var children = targetItem.children; 29 | for(var index = 1; index < children.length; index++) 30 | { 31 | var currentItem = children[index]; 32 | var buf = new Object; 33 | 34 | buf["item"] = currentItem; 35 | buf["name"]=currentItem.objectName; 36 | buf["x"] = currentItem.x; 37 | buf["y"] = currentItem.y; 38 | buf["centerX"] = currentItem.x + (currentItem.width / 2); 39 | buf["centerY"] = currentItem.y + (currentItem.height / 2); 40 | buf["width"] = currentItem.width; 41 | buf["height"] = currentItem.height; 42 | 43 | //to salce the font size 44 | buf["fontSize"]=0; 45 | if(currentItem.font!=undefined) 46 | { 47 | buf["fontSize"]=currentItem.font.pointSize 48 | } 49 | //跳过当前对象以及所有子对象 50 | if(buf["name"]==ingnoreAll) 51 | { 52 | continue; 53 | } 54 | //跳过当前对象的子对象 55 | else if(buf["name"]==ingnoreChildren) 56 | { 57 | _childrenItemGeometry.push(buf) 58 | } 59 | else 60 | { 61 | _childrenItemGeometry.push(buf) 62 | getAllChildren(_childrenItemGeometry,currentItem) 63 | } 64 | } 65 | childrenItemGeometry=_childrenItemGeometry 66 | console.log("length->"+_childrenItemGeometry.length) 67 | isBegin = true; 68 | } 69 | function getAllChildren(_childrenItemGeometry,target) 70 | { 71 | var children = target.children; 72 | for(var index = 0; index < children.length; index++) 73 | { 74 | var currentItem = children[index]; 75 | var buf = new Object; 76 | 77 | buf["item"] = currentItem; 78 | buf["name"]=currentItem.objectName; 79 | buf["x"] = currentItem.x; 80 | buf["y"] = currentItem.y; 81 | buf["centerX"] = currentItem.x + (currentItem.width / 2); 82 | buf["centerY"] = currentItem.y + (currentItem.height / 2); 83 | buf["width"] = currentItem.width; 84 | buf["height"] = currentItem.height; 85 | buf["fontSize"]=0; 86 | if(currentItem.font!=undefined) 87 | { 88 | buf["fontSize"]=currentItem.font.pointSize 89 | } 90 | //跳过当前对象以及所有子对象 91 | if(buf["name"]=="ingnoreAll") 92 | { 93 | continue; 94 | } 95 | //跳过当前对象的子对象 96 | else if(buf["name"]=="ingnoreChildren") 97 | { 98 | _childrenItemGeometry.push(buf) 99 | } 100 | else 101 | { 102 | _childrenItemGeometry.push(buf) 103 | getAllChildren(_childrenItemGeometry,currentItem) 104 | } 105 | } 106 | } 107 | 108 | function resize() { 109 | if(isBegin&&ifAutoResize) 110 | { 111 | //var horizontalRatio, verticalRatio,fontRatio; 112 | 113 | horizontalRatio = targetItem.width / targetItemGeometry["width"]; 114 | verticalRatio = targetItem.height / targetItemGeometry["height"]; 115 | fontRatio=horizontalRatio>verticalRatio?verticalRatio:horizontalRatio; 116 | //set fontRatio the greatest radio 117 | if(fontAccordingToMax) 118 | fontRatio=(horizontalCenter+verticalRatio)-fontRatio 119 | console.log("radio->"+horizontalRatio+"--"+verticalRatio) 120 | console.log("toal item ->"+childrenItemGeometry.length) 121 | for(var index = 0; index < childrenItemGeometry.length; index++) 122 | { 123 | var currentItem=childrenItemGeometry[index] 124 | if(fixedAspectRatio) 125 | { 126 | if(horizontalRatio > verticalRatio) 127 | { 128 | childrenItemGeometry[index]["item"].width = childrenItemGeometry[index]["width"] * verticalRatio; 129 | childrenItemGeometry[index]["item"].height = childrenItemGeometry[index]["height"] * verticalRatio; 130 | } 131 | else 132 | { 133 | childrenItemGeometry[index]["item"].width = childrenItemGeometry[index]["width"] * horizontalRatio; 134 | childrenItemGeometry[index]["item"].height = childrenItemGeometry[index]["height"] * horizontalRatio; 135 | } 136 | } 137 | else 138 | { 139 | childrenItemGeometry[index]["item"].width = childrenItemGeometry[index]["width"] * horizontalRatio; 140 | childrenItemGeometry[index]["item"].height = childrenItemGeometry[index]["height"] * verticalRatio; 141 | } 142 | if(accordingToX) 143 | { 144 | childrenItemGeometry[index]["item"].x = childrenItemGeometry[index]["x"] * horizontalRatio; 145 | childrenItemGeometry[index]["item"].y = childrenItemGeometry[index]["y"] * verticalRatio; 146 | } 147 | else 148 | { 149 | childrenItemGeometry[index]["item"].x = childrenItemGeometry[index]["centerX"] * horizontalRatio - (childrenItemGeometry[index]["item"].width / 2); 150 | childrenItemGeometry[index]["item"].y = childrenItemGeometry[index]["centerY"] * verticalRatio - (childrenItemGeometry[index]["item"].height / 2); 151 | } 152 | if(childrenItemGeometry[index]["item"].font!=undefined) 153 | { 154 | childrenItemGeometry[index]["item"].font.pointSize = childrenItemGeometry[index]["fontSize"]*fontRatio*fontSizeScaleFactor 155 | } 156 | } 157 | globalResize.resized(); 158 | 159 | } 160 | } 161 | 162 | Component.onCompleted: { 163 | begin(); 164 | } 165 | 166 | Component { 167 | id: connections 168 | 169 | Connections { 170 | target: targetItem 171 | 172 | onWidthChanged: { 173 | resize(); 174 | } 175 | onHeightChanged: 176 | { 177 | resize(); 178 | } 179 | } 180 | } 181 | 182 | Loader { 183 | Component.onCompleted: { 184 | sourceComponent = connections; 185 | } 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /QMLAutoResize.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.5 2 | import QtQuick.Window 2.2 3 | 4 | Rectangle { 5 | visible: true 6 | width: 400 7 | height: 300 8 | AutoResize{ 9 | id:globalResize 10 | } 11 | Rectangle{ 12 | x:20;y:20 13 | width:100 14 | height: 100 15 | color: "yellow" 16 | Text { 17 | text: qsTr("Test") 18 | } 19 | } 20 | Rectangle{ 21 | x:120;y:120 22 | width:200 23 | height: 100 24 | color: "blue" 25 | Text { 26 | text: qsTr("Test") 27 | } 28 | } 29 | Text { 30 | id: name 31 | //anchors.centerIn: parent 32 | text: qsTr("FontSizeTest") 33 | } 34 | // ListView{ 35 | // width: 100 36 | // height: 100 37 | // model: 3 38 | // delegate: Rectangle{ 39 | // height: 30 40 | // anchors.fill: parent 41 | // Text{ 42 | // text:index 43 | // } 44 | // } 45 | // } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /QMLAutoResize.qmlproject: -------------------------------------------------------------------------------- 1 | /* File generated by Qt Creator */ 2 | 3 | import QmlProject 1.1 4 | 5 | Project { 6 | mainFile: "QMLAutoResize.qml" 7 | 8 | /* Include .qml, .js, and image files from current directory and subdirectories */ 9 | QmlFiles { 10 | directory: "." 11 | } 12 | JavaScriptFiles { 13 | directory: "." 14 | } 15 | ImageFiles { 16 | directory: "." 17 | } 18 | /* List of plugin directories passed to QML runtime */ 19 | // importPaths: [ "../exampleplugin" ] 20 | } 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # QMLAutoResize 2 | QML AutoResize 3 | A demo to make your qml items autoresize with the size changing of parent 4 | #How to use 5 | Add a item of AutoResize in as the fisrt child of your root item, so your children can autoresize when your root item size changes. 6 | --------------------------------------------------------------------------------