qml layout
一、使用总结
1.锚点：锚点锚在父控件左边anchors.left: parent.left ，才可以设置anchors.leftMargin：20 才有作用，设置anchors.topMargin: 60是没用的。可以这样设置
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin:
anchors.topMargin:
二、代码
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2
Window {
visible: true
width:
height:
title: qsTr("Hello World")
RowLayout {
id: layout
anchors.fill: parent
spacing:
Rectangle {
id:rect1
//color: 'red'
Layout.fillWidth: true
Layout.minimumWidth:
Layout.preferredWidth:
Layout.maximumWidth:
Layout.minimumHeight:
border.width:
border.color: Qt.lighter("red")
GridLayout{
anchors.fill: parent
anchors.margins:
columns:
rows:
Rectangle{
Layout.column:
Layout.row:
Layout.fillWidth: true
Layout.fillHeight: true
width:
color: "#00ff00"
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
} Rectangle{
Layout.column:
Layout.row:
Layout.fillWidth: true
Layout.fillHeight: true
width:
color: "#0000ff"
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
} } }
Rectangle {
color: 'plum'
Layout.fillWidth: true
Layout.minimumWidth:
Layout.preferredWidth:
Layout.preferredHeight:
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
}
} }
代码举例2
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2
import QtQuick.VirtualKeyboard 2.2
import QtQuick.Extras 1.4
import QtCharts 2.0 Window {
id: rootwindow
visible: true
//4096X2304 1366 768
width:
//width: 4096
height: property int leftWidth:
property int centerWidth:
property int rightWidth:
property int uiHeight :
title: qsTr("Forklift")
objectName: "mainWindowObj"
readonly property color bgColor: "#40434A"
readonly property color borderColor: "#6affcd"
readonly property color colorLightGrey: "#888"
property int uiWidth:
color: bgColor
Component.onCompleted: {
x = Screen.width / - width /
y = Screen.height / - height /
}
onClosing:{
commCentral.free()
}
Rectangle{
id: containerRect
anchors.fill: parent
anchors.margins:
border.color:borderColor
border.width:
color: bgColor
smooth: true
RowLayout{
id: mainRowLayout
anchors.fill: parent
anchors.margins:
spacing: ColumnLayout{
id:leftContainerColumnLayout
Rectangle{
id:leftContainerRect
Layout.fillHeight: true
width: leftWidth
//color: "blue"
color:bgColor
Label{
id:taskNameLabel
width: leftContainerRect.width
text: "任务"
font.pixelSize:
color: borderColor
}
LinearGradient1Item{
id:taskLinear
anchors.top: taskNameLabel.bottom
width:leftContainerRect.width
}
Rectangle{
id:taskRect
anchors.top: taskLinear.bottom
width:leftContainerRect.width
height:
TableViewItem{
id:taskTableView
width:taskRect.width
height: taskRect.height
objectName: "taskTableViewObj"
}
} Rectangle{
id:charViewRect
anchors.top: taskRect.bottom
anchors.topMargin:
width: leftContainerRect.width
height:
border.width:
border.color: Qt.lighter(bgColor) color: bgColor
PieSeriesItem{
id:kpiChartView
width: charViewRect.width
height:
objectName: "kpiChartViewObj"
}
} }//end leftContainerRect }//end leftContainerColumnLayout ColumnLayout{
id:centerContainerColumnLayout
Rectangle{
id:centerContainerRect
anchors.leftMargin:
width: centerWidth
height: uiHeight
color: "red"
RunItem{
width:centerWidth
height:uiHeight
objectName: "runItemObj"
Text{
text: "w:"+parent.width+" h:"+parent.height;
color: "white"
font.pixelSize:
} } }//end centerContainerRect }//end centerContainerColumnLayout ColumnLayout{
id:rightContainerColumnLayout
Rectangle{
id:rightContainerRect
anchors.leftMargin:
width: rightWidth
height: uiHeight
//color: "green"
color: bgColor
Rectangle{
id:agvStatusRect
height:
width:rightWidth
color: bgColor
//color:"#ff0000"
StatusInfoItem{
height: agvStatusRect.height
Layout.fillWidth: true
objectName: "statusInfoItemObj"
}
} Rectangle{
id:speedRect
anchors.top: agvStatusRect.bottom
anchors.topMargin:
width: rightWidth
height:
color:bgColor
//color:"#00ff00"
CircularGauge {
id: speedometer
Layout.alignment: Qt.AlignLeft
maximumValue:
value:
width: speedRect.width
height: speedRect.height
style: DashboardGaugeStyle {} }
}
Rectangle{
id:menuButtonRect
anchors.top: speedRect.bottom
anchors.topMargin:
width: rightWidth
height:
color:bgColor
OperateAgvWindow{
id:operateAgvW
visible: false
objectName: "operateAgvObj"
}
ShowLogWindow{
id:showLogWindow
visible: false
objectName: "showLogWindowObj"
}
MessageWindow{
id:messageWindow
visible: false
}
MyButton{
id:operateButton
btnText: ""
imgSource: "qrc:/icons/navigation.png"
onClicked: {
operateAgvW.show()
operateAgvW.deleteLater
}
}
MyButton{
id:laserMapButton
anchors.left: operateButton.right
anchors.leftMargin:
btnText: ""
imgSource: "qrc:/icons/map.png"
onClicked: {
commCentral.showLaserMapDrawer();
}
} } }//end rightContainerRect }//end rightContainerColumnLayout }//end mainRowLayout }//end containerRect // Rectangle{
// id: container
// anchors.fill: parent
// anchors.margins: 10
// border.color:borderColor
// border.width: 1
// color: bgColor
// smooth: true
// RowLayout{
// id: mainRowLayout
// anchors.fill: parent
// anchors.margins: 10
// spacing: 0 // ColumnLayout{
// id:leftColLayout
// Layout.fillWidth: true
// Layout.fillHeight: true
// Layout.maximumWidth:uiWidth/4
// Label{
// Layout.fillWidth: true
// text: "任务"
// font.pixelSize:16
// color: borderColor
// } // LinearGradient1Item{
// Layout.fillWidth: true
// }
// Rectangle{
// id:taskRect
// Layout.fillWidth: true
// Layout.fillHeight: true
// Layout.maximumWidth:leftColLayout.width
// Layout.topMargin: 10
// height: 100
// TableViewItem{
// id:taskTableView
// width:taskRect.width
// height: taskRect.height
// objectName: "taskTableViewObj"
// }
// } // Rectangle{
// id:charViewRect
// Layout.fillWidth: true
// //Layout.fillHeight: true
// height: 400
// Layout.margins: 0
// border.width: 1
// border.color: Qt.lighter(bgColor)
// //Layout.maximumWidth: 200
// color: bgColor
// PieSeriesItem{
// id:kpiChartView
// width: leftColLayout.width
// height: 400
// objectName: "kpiChartViewObj"
// }
// } // }//end leftColLayout // Rectangle{
// id:centerRect
// Layout.fillHeight: true
// Layout.minimumWidth:600
// Layout.preferredWidth:600
// Layout.maximumWidth:600
// Layout.minimumHeight: 600
// color: bgColor
// //color:"#ff0000" // RunItem{
// width:600
// height:600
// objectName: "runItemObj"
// Text{
// text: "w:"+parent.width+" h:"+parent.height;
// color: "white"
// font.pixelSize: 10
// } // } // } // ColumnLayout{
// id:rightLayout
// Layout.fillHeight: true
// Layout.fillWidth: true
// Layout.minimumWidth: 100
// Layout.maximumWidth: uiWidth/4
// Layout.preferredWidth: uiWidth/4
// Layout.alignment: Qt.AlignTop|Qt.AlignRight // Rectangle{
// id:agvStatusRect
// height: 160
// Layout.fillWidth: true
// color: bgColor
// //color:"#ff0000"
// StatusInfoItem{
// height: agvStatusRect.height
// Layout.fillWidth: true
// objectName: "statusInfoItemObj"
// }
// } // Rectangle{
// id:speedRect
// Layout.fillWidth: true
// Layout.topMargin:60
// height: 200
// color:bgColor
// //color:"#00ff00"
// CircularGauge {
// id: speedometer
// Layout.alignment: Qt.AlignLeft
// maximumValue: 150
// value: 0
// width: speedRect.width
// height: speedRect.height
// style: DashboardGaugeStyle {} // } // } // ColumnLayout{
// id:menuColLayout
// Layout.fillWidth: true
// Layout.fillHeight: true
// Rectangle{
// Layout.fillHeight: true
// //color: "#ff0000"
// }
// RowLayout{
// id:menuRowLayout
// Layout.fillWidth: true
// OperateAgvWindow{
// id:operateAgvW
// visible: false
// objectName: "operateAgvObj"
// }
// ShowLogWindow{
// id:showLogWindow
// visible: false
// objectName: "showLogWindowObj"
// }
// MessageWindow{
// id:messageWindow
// visible: false
// } // MyButton{
// id:operateButton
// btnText: ""
// imgSource: "qrc:/icons/navigation.png"
// onClicked: {
// operateAgvW.show()
// operateAgvW.deleteLater
// }
// }
// MyButton{
// id:laserMapButton
// btnText: ""
// imgSource: "qrc:/icons/map.png"
// onClicked: {
// commCentral.showLaserMapDrawer();
// }
// } // }//end menuRowLayout // }//end menuColLayout // }//end rightLayout // }//end mainRowLayout // } function showSpeed(v){
speedometer.value=v
} }
qml layout的更多相关文章
- QML嵌入到QWidget中方法
简介 嵌入方法有两种一种是直接拖控件,另一种是cpp代码动态生成, 控件方式 动态代码生成 QQuickWidget *m_quickWidget=new QQuickWidget(); QUrl s ...
- QML 语言基础
在<Qt Quick 简单介绍>中我们提到 QML 语法和 Json 相似,请參考<Qt on Android: http下载与Json解析>查看 Json 语法.当然这里我们 ...
- qml demo分析(externaldraganddrop-拖拽)
一.效果展示 客户端程序拖拽是一个很常见的需求,对于QWidget程序来说,需要重写如图1这么几个方法,通过重写这几个方法的逻辑,我们就可以控制鼠标拖拽的逻辑,糟糕的是QDrag执行exec后是一个阻 ...
- qml demo分析(text-字体展示)
上一篇文章分析了一个小游戏,使用qml编写界面+js进行复杂逻辑控制,算是一个比较完整的qml示例代码了,今天就不那么继续变态啦,来看一个简单的字体示例程序吧,该示例代码比较简单,主要是展示了几个简单 ...
- QML ListView json
1.main.cpp #include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQml ...
- QML学习笔记（五）— 做一个简单的待做事项列表
做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...
- QML常用控件
这里的控件是显示的元素 1.Item:一切的基类 Item { Image { source: "tile.png" } Image { x: width: height: sou ...
- Qt Quick快速入门之qml与C++交互
C++中使用qml对象,直接使用findChild获取qml对象,然后调用setProperty方法设置属性,当然必须在加载qml之后才能使用,不然findChild找不到对象,用法如下. engin ...
- Qt Quick快速入门之qml布局
Qml里面布局主要有两种,锚点布局.Grid布局. 锚点布局使用anchors附件属性将一个元素的边定位到另一个元素的边,从而确定元素的位置和大小.下面是示例 import QtQuick 2.3 i ...
随机推荐
- linux 下ab压力测试
1.ab的简介 ab是apachebench命令的缩写. ab是apache自带的压力测试工具.ab非常实用,它不仅可以对apache服务器进行网站访问压力测试,也可以对或其它类型的服务器进行压力测试 ...
- squid3.5缓存代理实践记录
准备: 两台服务器,一台web,一台squid缓存代理 squid机域名:www.dannylinux.top web机IP:12.1.1.1 1.版本: [root@danny squid]# sq ...
- jsonp 实现前端跨域
1.基于ajax 发起jsonp 请求. 前端代码: let url = 'http://localhost:8001/'; $.ajax({ type: 'get', dataType: 'json ...
- mysql-笔记-控制语句/string方法
1 case case value when [compare_value] then result [when[compare_value] then result....] [else resul ...
- Azure Function & AWS Function With C#
Using C# with Azure Functions Two important prerequisites need to be met to build Azure Functions ap ...
- 树莓派3B+(二)
一.安装SSH工具 这里用的是putty,下载下来是一个exe文件,点开就能用. 下载地址:https://www.chiark.greenend.org.uk/~sgtatham/putty/lat ...
- noip2017部分题目
D1T3 逛公园 题目描述 策策同学特别喜欢逛公园.公园可以看成一张NN个点MM条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口,NN号点是公园的出口,每条边有一个非负权值, 代表策策经过 ...
- vue 使用v-html指令渲染的富文本无法修改样式的解决方法
最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式 解决方法: 把需要添加或重置的样式单独放在一个style标签里, 定义为全局样式,代码如下: <style> ...
- 关于Vue修改默认的build文件存放的dist路径
原文地址:http://www.cnblogs.com/JimmyBright/p/7681086.html Vue默认build路径是项目的dist目录下,有时候我们可能希望build之后的文件自动 ...
- Jenkins安装后无法安装插件
处理方法 Jenkins -- 管理插件 -- 高级 -- 升级站点 将URL 中的https 改为 http