QML的Gridlayout布局

最新推荐文章于 2025-07-08 21:05:10 发布

曹小宁

最新推荐文章于 2025-07-08 21:05:10 发布

阅读量5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： it 文章标签： it技术前端设计 qml gridlayout

本文链接：https://blog.youkuaiyun.com/u012483927/article/details/83144826

这篇博客介绍了如何在QML中使用GridLayout进行界面布局，详细展示了如何设置行列数、间距，并通过实例演示了创建多个TextField输入框的布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 {