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 ...
随机推荐
- 算法01 C语言设计
8.21 #include <stdio.h> void bubbleSort(int **p, int n); int main(void){ int a[100]; int *b[10 ...
- flutter获取状态栏高度
import 'dart:ui'; MediaQueryData.fromWindow(window).padding.top 系统默认的appBar等高度 位于Dart Packages/flutt ...
- mysql-笔记-默认值
1 指定列的默认值 columnName int default '-1' 2 integer 列-设置自增列 也是指定默认值的方式 3 默认值必须是常量 不能使用函数.表达式---特例:timest ...
- Sptringboot 添加子项目
1:复制一个子项目,修改项目名 2:修改启动类 3:修改pom.xml 4:打开project structure 选择Modules 下一步下一步 5:添加主项目的pom.xml 在<mo ...
- Jetson TX1安装pyTorch
https://www.ncnynl.com/archives/201705/1629.html https://blog.csdn.net/qq_36302589/article/details/8 ...
- C#中声明、调用和配置事件的演示源码
下面的内容是关于C#中声明.调用和配置事件的演示的内容,应该能对大伙有些好处. using System;namespace MyCollections { using System.Collecti ...
- ModBus-RTU详解
Modbus 一个工业上常用的通讯协议.一种通讯约定.Modbus协议包括RTU.ASCII.TCP.其中MODBUS-RTU最常用,比较简单,在单片机上很容易实现.虽然RTU比较简单,但是看协议 ...
- [Android] Android 最全 Intent 传递数据姿势
我们都是用过 Intent,用它来在组件之间传递数据,所以说 Intent 是组件之间通信的使者,一般情况下,我们传递的都是一些比较简单的数据,并且都是基本的数据类型,写法也比较简单,今天我在这里说的 ...
- 爬虫框架Scrapy 之(一) --- scrapy初识
Scrapy框架简介 scrapy是基于Twisted的一个第三方爬虫框架,许多功能已经被封装好,方便提取结构性的数据.其可以应用在数据挖掘,信息处理等方面.提供了许多的爬虫的基类,帮我们更简便使用爬 ...
- SQL 耗时优化
Ø 简介 在平常的开发中,我们经常会编写各种各样的 SQL 语句,比如:SQL 查询.存储过程.或者视图查询等.当我们编写的 SQL 语句比较复杂,或者表的数据量比较大,导致查询超时!这时,就要去分 ...