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 | 观察到的结果

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

EXPECTED RESULT | 期望的结果
- 115宽度内,点击下拉列表,能完整显示图标和文本内容。
- UI设计效果与Dtk5尽量保持一致,同时参考设计图效果。
ADDITIONAL INFORMATION | 额外补充
1.若在有限的Combobox宽度内,文本依然显示不全,可从尾部截断显示。
3.ComboBox样式可参考UI设计图,可咨询王若璇。
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
OBSERVED RESULT | 观察到的结果
在上述示例代码中,将combobox的宽度调整为原来三倍,可完整显示子项文本内容和图标
EXPECTED RESULT | 期望的结果
ADDITIONAL INFORMATION | 额外补充
1.若在有限的Combobox宽度内,文本依然显示不全,可从尾部截断显示。
3.ComboBox样式可参考UI设计图,可咨询王若璇。