一、使用总结
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
} }