qml formLayout实现方式

一、背景

我们制作界面时，通常有表单界面需要制作，如下图：

但是Qt5 是没有 formLayout 的，直到Qt6才有，所以现在 qml 使用 TableView 来实现这个样式

二、实现

cpp 复制代码

enum ComponentType {
        TitleText,
        Text,
        Button,
        Image
    }
TableView {
        id: _ifoView
        clip: true
        property int fColumnWidth: 75
        property int sColumnWidth: 280

        model: TableModel {
            id: _ifoViewModel
            TableModelColumn { display: "FColumn" }
            TableModelColumn { display: "SColumn" }
            rows: []
        }

        delegate: Item {
            implicitWidth: display.dataType === DeviceInfo.TitleText? _ifoView.fColumnWidth : _ifoView.sColumnWidth
            implicitHeight: display.height
            Loader{
                id: _loader
                anchors.fill: parent
                onLoaded: {
                    _loader.item.dataDisplay = display;
                }
            }

            Component.onCompleted: {
                switch (display.dataType){
                case DeviceInfo.TitleText:
                    _loader.sourceComponent = _TitleTextComponent
                    break;
                case DeviceInfo.Text:
                    _loader.sourceComponent = _TextComponent
                    break;
                case DeviceInfo.Button:
                    _loader.sourceComponent = _ButtonComponent
                    break;
                case DeviceInfo.Image:
                    _loader.sourceComponent = _ImageComponent
                    break;
                }
            }
        }
    }
    Component{
        id: _TitleTextComponent
        Rectangle{
            anchors.fill: parent
            property var dataDisplay
            color:"transparent"
            Text {
                text: dataDisplay.title
                anchors.left: parent.left
                opacity: 0.7
                font.pixelSize: 13
            }
        }
    }
    Component{
        id: _TextComponent
        Rectangle{
            anchors.fill: parent
            color:"transparent"
            property var dataDisplay
            Text {
                text: dataDisplay.title
                anchors.left: parent.left
                font.pixelSize: 13
                width: _ifoView.sColumnWidth
                wrapMode: Text.WordWrap
            }
        }
    }
    Component{
        id: _ButtonComponent
        Rectangle{
            anchors.fill: parent
            color:"transparent"
            property var dataDisplay
            Text {
                id: _text
                text: dataDisplay.title
                anchors.left: parent.left
                anchors.top: parent.top
                font.pixelSize: 13
            }
            Button {
                text: qsTr("复制")
                anchors.left: _text.right
                anchors.leftMargin: 10
                anchors.verticalCenter: _text.verticalCenter
                alwaysHighlight: true
                font.pixelSize: 13
                onClicked: {
                }
            }
        }
    }
    Component{
        id: _ImageComponent
        Rectangle{
            anchors.fill: parent
            property var dataDisplay
            color:"transparent"
            Image {
                id: _image
                width: 24
                height: 16
                source: dataDisplay.source
                anchors.left: parent.left
                anchors.top: parent.top
            }
            Text {
                text: dataDisplay.title
                anchors.left: _image.right
                anchors.leftMargin: 5
                anchors.verticalCenter: _image.verticalCenter
                font.pixelSize: 13
            }
        }
    }

数据格式是

cpp 复制代码

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);