当前位置：首页 > news >正文

qml formLayout实现方式

news 2025/11/14 7:07:29

一、背景

我们制作界面时，通常有表单界面需要制作，如下图：
在这里插入图片描述
但是Qt5 是没有 formLayout 的，直到Qt6才有，所以现在 qml 使用 TableView 来实现这个样式

二、实现

enum ComponentType {TitleText,Text,Button,Image}
TableView {id: _ifoViewclip: trueproperty int fColumnWidth: 75property int sColumnWidth: 280model: TableModel {id: _ifoViewModelTableModelColumn { display: "FColumn" }TableModelColumn { display: "SColumn" }rows: []}delegate: Item {implicitWidth: display.dataType === DeviceInfo.TitleText? _ifoView.fColumnWidth : _ifoView.sColumnWidthimplicitHeight: display.heightLoader{id: _loaderanchors.fill: parentonLoaded: {_loader.item.dataDisplay = display;}}Component.onCompleted: {switch (display.dataType){case DeviceInfo.TitleText:_loader.sourceComponent = _TitleTextComponentbreak;case DeviceInfo.Text:_loader.sourceComponent = _TextComponentbreak;case DeviceInfo.Button:_loader.sourceComponent = _ButtonComponentbreak;case DeviceInfo.Image:_loader.sourceComponent = _ImageComponentbreak;}}}}Component{id: _TitleTextComponentRectangle{anchors.fill: parentproperty var dataDisplaycolor:"transparent"Text {text: dataDisplay.titleanchors.left: parent.leftopacity: 0.7font.pixelSize: 13}}}Component{id: _TextComponentRectangle{anchors.fill: parentcolor:"transparent"property var dataDisplayText {text: dataDisplay.titleanchors.left: parent.leftfont.pixelSize: 13width: _ifoView.sColumnWidthwrapMode: Text.WordWrap}}}Component{id: _ButtonComponentRectangle{anchors.fill: parentcolor:"transparent"property var dataDisplayText {id: _texttext: dataDisplay.titleanchors.left: parent.leftanchors.top: parent.topfont.pixelSize: 13}Button {text: qsTr("复制")anchors.left: _text.rightanchors.leftMargin: 10anchors.verticalCenter: _text.verticalCenteralwaysHighlight: truefont.pixelSize: 13onClicked: {}}}}Component{id: _ImageComponentRectangle{anchors.fill: parentproperty var dataDisplaycolor:"transparent"Image {id: _imagewidth: 24height: 16source: dataDisplay.sourceanchors.left: parent.leftanchors.top: parent.top}Text {text: dataDisplay.titleanchors.left: _image.rightanchors.leftMargin: 5anchors.verticalCenter: _image.verticalCenterfont.pixelSize: 13}}}

数据格式是

function aovIfo(){var codeRow = {"FColumn": {dataType:DeviceInfo.TitleText, title:"设备", height:20},"SColumn": {dataType:DeviceInfo.Button, title:"设备", height:22}}_ifoViewModel.appendRow(codeRow);var powerLevelRow = {"FColumn": {dataType:DeviceInfo.TitleText, title:"版本", height:20},"SColumn": {dataType:DeviceInfo.Image, title:"1%", height:22, source:""}}_ifoViewModel.appendRow(powerLevelRow);