Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
starhcq opened this issue Sep 19, 2024 · 0 comments

Comments

@starhcq
Copy link

starhcq commented Sep 19, 2024

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设计图,可咨询王若璇。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant