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 ...
随机推荐
- react dnd demo
target import React ,{ Component } from 'react'; import { DropTarget } from 'react-dnd'; import Item ...
- 报错utf-8错误
当python运行总报utf-8错误时, f = open('CI_CUSER_2019040116033031.txt')data_app = pd.read_csv(f)print(data_ap ...
- Java面试题之基础篇概览
Java面试题之基础篇概览 1.一个“.java”源文件中是否可以包含多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,且public的类名必须与文件名相一致. 2.Ja ...
- 论Scrapy中的数据持久化
引入 Scrapy的数据持久化,主要包括存储到数据库.文件以及内置数据存储. 那我们今天就来讲讲如何把Scrapy中的数据存储到数据库和文件当中. 终端指令存储 保证爬虫文件的parse方法中有可迭代 ...
- 【BZOJ4028】[HEOI2015]公约数数列（分块）
[BZOJ4028][HEOI2015]公约数数列(分块) 题面 BZOJ 洛谷 题解 看一道题目就不会做系列 首先\(gcd\)最多只会有\(log\)种取值,所以我们可以暴力枚举出所有可能的\(g ...
- Django中ORM介绍
Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...
- (String) leetcode 67. Add Binary
Given two binary strings, return their sum (also a binary string). The input strings are both non-em ...
- webstorm开发微信小程序
参考博客:https://www.cnblogs.com/pansidong/articles/7563155.html
- 关于Mac 系统mysql 乱码问题
这是由于客户端和服务端的编码没有同一 首先我们先在终端连接mysql 连接方法 mysql -u 用户名 -p 即可 然后输入你的密码 这里就不多说了 然后我们输入 show variabl ...
- Python包中 __init__.py文件的作用
原创连接 https://www.cnblogs.com/AlwinXu/p/5598543.html Python包中 __init__.py文件的作用 在创建python包的过程中,IDE都会在包 ...