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
    }

}