Skip to content

[dtk6declarative] ComboBox在115像素宽度下下拉列表内容显示不全 #197

Description

@starhcq

SUMMARY | 问题概要

1.添加一个Combobox,设置宽度为115,添加三个子项到下拉框中,列表子项仅能显示图标,不能显示文本内容
2.在dtk5declarative控件库,上述115宽度能够完整显示子项内容。
3.看起来是新版dtk6控件,对下拉列表内容显示间距做了调整。

DTK and OS VERSIONS | DTK&系统版本信息

Distribution: v25 0809
Pacakge: dtk6declarative 6.0.19

Minimal Reproducible Case Code | 最小复现案例代码

Demo:
ComboBoxTest.zip

ComboBox {
            id: comboBox
            anchors.centerIn: parent
            textRole: "text"
            iconNameRole: "icon"
            flat: true

            width: 115
            model: ListModel {
                ListElement { text: qsTr("All"); icon: "checked" }
                ListElement { text: qsTr("Photos"); icon: "unchecked" }
                ListElement { text: qsTr("Videos"); icon: "ok" }
            }

            delegate: MenuItem {
                useIndicatorPadding: true
                width: parent.width
                text: comboBox.textRole ? (Array.isArray(comboBox.model) ? modelData[comboBox.textRole] : model[comboBox.textRole]) : modelData
                icon.name: (comboBox.iconNameRole && model[comboBox.iconNameRole] !== undefined) ? model[comboBox.iconNameRole] : null
                highlighted: comboBox.highlightedIndex === index
                hoverEnabled: comboBox.hoverEnabled
                autoExclusive: true
                checked: comboBox.currentIndex === index
            }

            // 为符合UI效果,弹框宽度比下拉框宽度略大
            popup: Popup {
                clip: true
                x: -15
                implicitWidth: comboBox.width + 15
                contentItem: ArrowListView {
                    maxVisibleItems: comboBox.maxVisibleItems
                    view.model: comboBox.delegateModel
                    view.currentIndex: comboBox.highlightedIndex
                    view.highlightRangeMode: ListView.ApplyRange
                    view.highlightMoveDuration: 0
                }

                background: FloatingPanel {
                    implicitWidth: DS.Style.menu.item.width
                    implicitHeight: DS.Style.menu.item.height
                    radius: DS.Style.menu.radius
                    backgroundColor: DS.Style.menu.background
                }
            }
        }

OBSERVED RESULT | 观察到的结果

截图_ComboBoxTest_20240919180304
在上述示例代码中,将combobox的宽度调整为原来三倍,可完整显示子项文本内容和图标
截图_ComboBoxTest_20240919180849

EXPECTED RESULT | 期望的结果

  1. 115宽度内,点击下拉列表,能完整显示图标和文本内容。
  2. UI设计效果与Dtk5尽量保持一致,同时参考设计图效果。

ADDITIONAL INFORMATION | 额外补充

1.若在有限的Combobox宽度内,文本依然显示不全,可从尾部截断显示。
3.ComboBox样式可参考UI设计图,可咨询王若璇。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions