QML ListView适配Material风格：如何实现委托随样式动态切换

一、让委托贴合Material Design风格 #

Material Design列表项有明确的规范（内边距、文字层级、交互反馈等），可以通过两种方式改造你的委托：

1. 直接使用Material组件库的现成控件 #

Qt Quick Controls 2提供了原生符合Material风格的Material.ListItem，能快速对齐设计规范：

Component {
    id: contactDelegate
    Material.ListItem {
        width: parent.width
        // 主文本（姓名）
        Text {
            text: name
            font.weight: Font.Bold
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 16 // Material规范的左侧内边距
        }
        // 次要文本（号码）
        Text {
            text: number
            font.size: 14
            color: Material.textColorSecondary // 复用Material的次要文本色
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.leftMargin: 16
            anchors.bottomMargin: 8
        }
        // 选中状态由组件自动处理，无需自定义highlight
    }
}

2. 手动对齐Material规范 #

如果不想依赖现成组件，可手动调整样式并使用Material的全局变量：

Component {
    id: contactDelegate
    Item {
        width: myList.width
        height: 60 // Material列表项推荐高度
        padding: 16

        Column {
            anchors.fill: parent
            Text {
                text: name
                font.weight: Font.Bold
                color: Material.textColor
            }
            Text {
                text: number
                font.size: 14
                color: Material.textColorSecondary
            }
        }

        // 替换硬编码高亮，使用Material的水波纹交互效果
        Material.Ripple {
            anchors.fill: parent
            pressed: mouseArea.pressed
            active: myList.currentIndex === index
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                myList.currentIndex = index
                myList.focus = true
            }
        }
    }
}

二、实现动态样式适配（切换Material/Universal等） #

Qt Quick Controls 2支持全局样式动态切换，核心是让委托的样式属性绑定到当前样式的全局变量，而非硬编码：

1. 使用跨样式通用属性 #

所有内置样式都提供统一的全局属性接口，比如Style.textColor、Style.primaryColor，绑定这些属性后，切换样式时会自动更新：

Text {
    text: name
    color: Style.textColor // 自适应当前样式的文本颜色
}

2. 动态切换全局样式 #

在代码中调用QtQuickControls2.setStyle()即可切换样式，委托会自动适配：

Button {
    text: "切换到Universal样式"
    onClicked: QtQuickControls2.setStyle("Universal")
}

3. 针对特定样式做个性化调整 #

如果需要对不同样式做特殊处理，可通过Style.name判断当前样式：

Text {
    text: number
    font.size: Style.name === "Material" ? 14 : 13
    color: Style.name === "Universal" ? Universal.accentColor : Material.textColorSecondary
}

三、修正原代码的核心问题 #

• 移除硬编码的highlight矩形，改用Material的水波纹效果实现选中反馈
• 将委托宽度绑定到ListView宽度，而非固定值180，保证自适应容器
• 使用Material全局颜色变量替代硬编码颜色

修改后的完整ListView示例：

Component {
    id: contactDelegate
    Item {
        width: myList.width
        height: 60
        padding: 16

        Column {
            anchors.fill: parent
            Text {
                text: name
                font.weight: Font.Bold
                color: Style.textColor
            }
            Text {
                text: number
                font.size: 14
                color: Style.textColorSecondary
            }
        }

        Material.Ripple {
            anchors.fill: parent
            pressed: mouseArea.pressed
            active: myList.currentIndex === index
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                myList.currentIndex = index
                myList.focus = true
            }
        }
    }
}

ListView {
    id: myList
    anchors.fill: parent
    model: ContactModel {}
    delegate: contactDelegate
    focus: true
    addDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
    clip: true
}

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