qml layout

一、使用总结

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
    }



}