QML实现GridLayout行选中：点击/悬停切换行背景的方法

问题描述 #

希望点击或悬停GridLayout中的某一行时，该行背景发生变化，尝试自定义行组件时，遇到需要为ComboBox、Label、TextInput、Button等每种字段类型创建对应对象的麻烦，现有自定义行代码如下：

Rectangle {
    id: root
    width: 200
    height: 20
    color: field.activeFocus ? "#a6a6a6" : (hovered ? "#c0c0c0" : "#eaeaea")
    property bool hovered: false

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            field.forceActiveFocus()
        }
        onEntered: { hovered = true}
        onExited: { hovered = false}
    }

    GridLayout {
        anchors.fill: parent
        columns: 2
        Label
        {
            id: label
            Layout.row: 0
            Layout.column: 0
            text: "Unknown"
            Layout.minimumWidth: 80
            Layout.fillHeight: true
            Layout.fillWidth: true
            font.weight: field.activeFocus ? Font.Bold : Font.Normal

        }
        Label // ComboBox // TextInput // Button
        {
            id: field
            Layout.row: 0
            Layout.column: 1
            text: "Unknown"
            Layout.minimumWidth: 80
            Layout.minimumHeight: 20
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }
}

解决方案 #

可以通过默认属性让自定义行组件支持任意类型的字段控件，避免重复创建不同版本的行组件，实现通用的悬停/点击背景变色逻辑：

修改后的通用行组件 #

Rectangle {
    id: root
    width: 200
    height: 20
    color: hasFocus ? "#a6a6a6" : (hovered ? "#c0c0c0" : "#eaeaea")
    property bool hovered: false
    property bool hasFocus: false
    property string labelText: "Unknown"

    // 默认属性：允许外部直接传入任意控件作为右侧字段
    default property alias fieldContent: fieldContainer.children

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            // 给传入的控件强制获取焦点
            if (fieldContainer.children.length > 0) {
                fieldContainer.children[0].forceActiveFocus()
            }
            root.hasFocus = true
        }
        onEntered: root.hovered = true
        onExited: root.hovered = false
    }

    GridLayout {
        anchors.fill: parent
        columns: 2

        Label {
            Layout.row: 0
            Layout.column: 0
            text: root.labelText
            Layout.minimumWidth: 80
            Layout.fillHeight: true
            Layout.fillWidth: true
            font.weight: root.hasFocus ? Font.Bold : Font.Normal
        }

        Item {
            id: fieldContainer
            Layout.row: 0
            Layout.column: 1
            Layout.minimumWidth: 80
            Layout.minimumHeight: 20
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }

    // 监听传入控件的焦点变化，同步行的焦点状态
    Connections {
        target: fieldContainer.children.length > 0 ? fieldContainer.children[0] : null
        onActiveFocusChanged: root.hasFocus = activeFocus
    }
}

实际使用示例 #

无需修改行组件，直接传入任意类型的控件即可：

GridLayout {
    columns: 1
    spacing: 2

    // 带Label的行
    CustomRow {
        labelText: "姓名"
        Label { text: "张三" }
    }

    // 带TextInput的行
    CustomRow {
        labelText: "年龄"
        TextInput { text: "25" }
    }

    // 带ComboBox的行
    CustomRow {
        labelText: "性别"
        ComboBox {
            model: ["男", "女"]
            currentIndex: 0
        }
    }

    // 带Button的行
    CustomRow {
        labelText: "操作"
        Button { text: "点击" }
    }
}

核心说明 #

• 默认属性复用：通过default property alias实现外部控件的动态注入，不用为每种字段类型单独编写行组件
• 统一状态管理：悬停、点击、焦点的逻辑集中在根组件处理，所有传入的控件都能复用这套样式逻辑
• 焦点同步：通过Connections监听传入控件的焦点变化，确保行背景色与控件焦点状态保持一致

内容的提问来源于stack exchange，提问作者Bevser