如何更改 ComboBox qml 中的三角形？

Question

如何更改组合框中三角形的大小和颜色？还要翻转三角形？

现在看起来像这样

Answer 1

我假设您使用的是 Material 样式。

不声明你自己的 indicator:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ComboBox {
        id: comboBox
        model: 10

        Binding {
            target: comboBox.indicator
            property: "rotation"
            value: 180
        }
        Binding {
            target: comboBox.indicator
            property: "color"
            value: "tomato"
        }
    }
}

声明你自己的 indicator:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ComboBox {
        id: comboBox
        model: 10
        indicator: ColorImage {
            x: comboBox.mirrored ? comboBox.padding : comboBox.width - width - comboBox.padding
            y: comboBox.topPadding + (comboBox.availableHeight - height) / 2
            color: "tomato"
            rotation: 180
            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Material/images/drop-indicator.png"
        }
    }
}

这两种方法都对所用样式的 QML 实现做了一些假设：

第一种方法假设指标具有 color 属性。这可能会在未来的版本中改变（尽管不太可能）。
第二种方法使用内部资源 URL（为方便起见，因为每个测试此代码的人都应该在他们的机器上有一个图像），但我通常不鼓励自己这样做。如果您确定您的应用程序将使用 Material 样式，那么它应该没问题，但同样，此路径可能会在未来版本中更改。如果您想要更面向未来的选项，请为 indicator.

如果您想要一个完全面向未来的选项，请实现您自己的风格：

https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#definition-of-a-style

该页面的 Qt 6 版本：

https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#definition-of-a-style

如何更改 ComboBox qml 中的三角形？

How to change triangle in ComboBox qml?

qt

qml

qt5