Grid网格布局就是在网格上面安置Item，可以通过设置他的rows， columns来控制网格的行列书，Grid默认的是4*4的， Grid默认的流是LeftToRight， 从左到右安置Item，一行放满再放到下一行中，可以通过修改Grid的flow属性来控制他，比如修改成TopToBottom。下面来看一下我的qml的Grid实现。
GridLayout{
id: printview
anchors.rightMargin:50;
anchors.bottomMargin:40;
anchors.leftMargin:50;
anchors.topMargin:20;
columns: 4
rows:5
rowSpacing: 5;
columnSpacing: 5;
anchors.fill: parent
Label{
id:voucheridLabel
text: “提煤单号”
font.pointSize: 20
}
TextField {
id: voucheridField
Layout.fillWidth: true
width: 300
font.pointSize: 20
horizontalAlignment: Text.AlignHCenter
color: “white”
background: Rectangle {
color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
border.color: parent.enabled ? “white” : “gray”
border.width: 1
radius: 3
}
}
Label{
id:vehicleNumLabel
text: “车 牌 号”
font.pointSize: 20
}
TextField {
id: vehicleNumberField
Layout.fillWidth: true
width: 300
font.pointSize: 20
horizontalAlignment: Text.AlignHCenter
color: “white”
background: Rectangle {
color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
border.color: parent.enabled ? “white” : “gray”
border.width: 1
radius: 5
}
}
Label{
id:customerNameLabel
text: “客户名称”
font.pointSize: 20
}
TextField {
id: customerNameField
Layout.fillWidth: true
width: 300
font.pointSize: 20
horizontalAlignment: Text.AlignHCenter
color: “white”
background: Rectangle {
color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
border.color: parent.enabled ? “white” : “gray”
border.width: 1
radius: 5
}
}
Label{
id:productNameLabel
text: “产品名称”
font.pointSize: 20
}
TextField {
id: productNameField
Layout.fillWidth: true
width: 300
font.pointSize: 20
horizontalAlignment: Text.AlignHCenter
color: “white”
background: Rectangle {
color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
border.color: parent.enabled ? “white” : “gray”
border.width: 1
radius: 5
}
}
Label{
id:vehicleTareLabel
text: “皮 重”
font.pointSize: 20
}
TextField {
id: vehicleTareField
Layout.fillWidth: true
width: 300
font.pointSize: 20
horizontalAlignment: Text.AlignHCenter
color: “white”
background: Rectangle {
color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
border.color: parent.enabled ? “white” : “gray”
border.width: 1
radius: 5
}
}
Label{
id:vehicleGrossLabel
text: “毛 重”
font.pointSize: 20
}
TextField {
id: vehicleGrossField
Layout.fillWidth: true
width: 300
font.pointSize: 20
horizontalAlignment: Text.AlignHCenter
color: “white”
background: Rectangle {
color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
border.color: parent.enabled ? “white” : “gray”
border.width: 1
radius: 5
}
}
Label{
id:vehicleSuttleLabel
text: “净 重”
font.pointSize: 20
}
TextField {
id: vehicleSuttleField
Layout.fillWidth: true
width: 300
font.pointSize: 20
horizontalAlignment: Text.AlignHCenter
color: “white”
background: Rectangle {
color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
border.color: parent.enabled ? “white” : “gray”
border.width: 1
radius: 5
}
}
Label{
id:ticketNumLabel
text: “煤 票 号”
font.pointSize: 20
}
TextField {
id: ticketNumField
Layout.fillWidth: true
width: 300
font.pointSize: 20
horizontalAlignment: Text.AlignHCenter
color: “white”
background: Rectangle {
color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
border.color: parent.enabled ? “white” : “gray”
border.width: 1
radius: 5
}
}
Label{
id:divisionLabel
text: “运 往 地”
font.pointSize: 20
}
TextField {
id: divisionField
Layout.fillWidth: true
width: 300
font.pointSize: 20
horizontalAlignment: Text.AlignHCenter
color: “white”
background: Rectangle {
color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
border.color: parent.enabled ? “white” : “gray”
border.width: 1
radius: 5
}
}
Button{
id:updateDivision
text:qsTr(“修改运往地”)
font.pointSize: 12
onClicked: destinationDrawer.open()
}
}
运行后的结果：
