一、使用总结
1.锚点：锚点锚在父控件左边anchors.left: parent.left ，才可以设置anchors.leftMargin：20 才有作用，设置anchors.topMargin: 60是没用的。可以这样设置
anchors.left: parent.left anchors.top: parent.top anchors.leftMargin: 30 anchors.topMargin: 60
二、代码
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 640 height: 480 title: qsTr("Hello World") RowLayout { id: layout anchors.fill: parent spacing: 6 Rectangle { id:rect1 //color: 'red' Layout.fillWidth: true Layout.minimumWidth: 50 Layout.preferredWidth: 100 Layout.maximumWidth: 300 Layout.minimumHeight: 150 border. 1 border.color: Qt.lighter("red") GridLayout{ anchors.fill: parent anchors.margins: 10 columns: 3 rows: 3 Rectangle{ Layout.column: 0 Layout.row: 0 Layout.fillWidth: true Layout.fillHeight: true 200 color: "#00ff00" Text { anchors.centerIn: parent text: parent.width + 'x' + parent.height } } Rectangle{ Layout.column: 1 Layout.row: 0 Layout.fillWidth: true Layout.fillHeight: true 200 color: "#0000ff" Text { anchors.centerIn: parent text: parent.width + 'x' + parent.height } } } } Rectangle { color: 'plum' Layout.fillWidth: true Layout.minimumWidth: 100 Layout.preferredWidth: 200 Layout.preferredHeight: 100 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 1366 // 4096 height: 2304 property int leftWidth:300 property int centerWidth: 700 property int rightWidth: 300 property int uiHeight : 620 title: qsTr("Forklift") objectName: "mainWindowObj" readonly property color bgColor: "#40434A" readonly property color borderColor: "#6affcd" readonly property color colorLightGrey: "#888" property int uiWidth: 1366 color: bgColor Component.onCompleted: { x = Screen.width / 2 - width / 2 y = Screen.height / 2 - height / 2 } onClosing:{ commCentral.free() } Rectangle{ id: containerRect anchors.fill: parent anchors.margins: 10 border.color:borderColor border. 1 color: bgColor smooth: true RowLayout{ id: mainRowLayout anchors.fill: parent anchors.margins: 10 spacing: 0 ColumnLayout{ id:leftContainerColumnLayout Rectangle{ id:leftContainerRect Layout.fillHeight: true leftWidth //color: "blue" color:bgColor Label{ id:taskNameLabel leftContainerRect.width text: "任务" font.pixelSize:16 color: borderColor } LinearGradient1Item{ id:taskLinear anchors.top: taskNameLabel.bottom leftContainerRect.width } Rectangle{ id:taskRect anchors.top: taskLinear.bottom leftContainerRect.width height: 200 TableViewItem{ id:taskTableView taskRect.width height: taskRect.height objectName: "taskTableViewObj" } } Rectangle{ id:charViewRect anchors.top: taskRect.bottom anchors.topMargin: 5 leftContainerRect.width height: 390 border. 1 border.color: Qt.lighter(bgColor) color: bgColor PieSeriesItem{ id:kpiChartView charViewRect.width height: 400 objectName: "kpiChartViewObj" } } }//end leftContainerRect }//end leftContainerColumnLayout ColumnLayout{ id:centerContainerColumnLayout Rectangle{ id:centerContainerRect anchors.leftMargin: 10 centerWidth height: uiHeight color: "red" RunItem{ centerWidth height:uiHeight objectName: "runItemObj" Text{ text: "w:"+parent.width+" h:"+parent.height; color: "white" font.pixelSize: 10 } } }//end centerContainerRect }//end centerContainerColumnLayout ColumnLayout{ id:rightContainerColumnLayout Rectangle{ id:rightContainerRect anchors.leftMargin: 10 rightWidth height: uiHeight //color: "green" color: bgColor Rectangle{ id:agvStatusRect height: 300 rightWidth color: bgColor //color:"#ff0000" StatusInfoItem{ height: agvStatusRect.height Layout.fillWidth: true objectName: "statusInfoItemObj" } } Rectangle{ id:speedRect anchors.top: agvStatusRect.bottom anchors.topMargin: 10 rightWidth height: 200 color:bgColor //color:"#00ff00" CircularGauge { id: speedometer Layout.alignment: Qt.AlignLeft maximumValue: 150 value: 0 speedRect.width height: speedRect.height style: DashboardGaugeStyle {} } } Rectangle{ id:menuButtonRect anchors.top: speedRect.bottom anchors.topMargin: 80 rightWidth height: 30 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: 5 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. 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 // taskRect.width // height: taskRect.height // objectName: "taskTableViewObj" // } // } // Rectangle{ // id:charViewRect // Layout.fillWidth: true // //Layout.fillHeight: true // height: 400 // Layout.margins: 0 // border. 1 // border.color: Qt.lighter(bgColor) // //Layout.maximumWidth: 200 // color: bgColor // PieSeriesItem{ // id:kpiChartView // 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{ // 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 // 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 } }