Skip to content

Commit 8467ac0

Browse files
mengpsmengps
committed
Feat: 1.Gallery增加搜索功能; 2.来自[DelegateUI]的更新.
1 parent 28d7e75 commit 8467ac0

File tree

3 files changed

+135
-19
lines changed

3 files changed

+135
-19
lines changed

‎DelegateUI_Qt5/gallery/qml/Examples/DataEntry/ExpAutoComplete.qml

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ Flickable {
2121
* **继承自 { DelInput }**\n
2222
支持的代理：\n
2323
- **labelDelegate: Component** 弹出框标签项代理，代理可访问属性：\n
24-
- \`textData: var\` {textRole}对应的文本数据\n
25-
- \`valueData: var\` {valueRole}对应的值数据\n
26-
- \`modelData: var\` 选项模型数据\n
27-
- \`hovered: bool\` 是否悬浮\n
28-
- \`highlighted: bool\` 是否高亮\n
24+
- \`parent.textData: var\` {textRole}对应的文本数据\n
25+
- \`parent.valueData: var\` {valueRole}对应的值数据\n
26+
- \`parent.modelData: var\` 选项模型数据\n
27+
- \`parent.hovered: bool\` 是否悬浮\n
28+
- \`parent.highlighted: bool\` 是否高亮\n
2929
- **labelBgDelegate: Component** 弹出框标签项背景代理，代理可访问属性：\n
30-
- \`textData: var\` {textRole}对应的文本数据\n
31-
- \`valueData: var\` {valueRole}对应的值数据\n
32-
- \`modelData: var\` 选项模型数据\n
33-
- \`hovered: bool\` 是否悬浮\n
34-
- \`highlighted: bool\` 是否高亮\n
30+
- \`parent.textData: var\` {textRole}对应的文本数据\n
31+
- \`parent.valueData: var\` {valueRole}对应的值数据\n
32+
- \`parent.modelData: var\` 选项模型数据\n
33+
- \`parent.hovered: bool\` 是否悬浮\n
34+
- \`parent.highlighted: bool\` 是否高亮\n
3535
- **clearIconDelegate: Component** 清除图标代理，等同于{DelInput.iconDelegate}\n
3636
支持的属性：\n
3737
属性名 | 类型 | 描述
@@ -43,7 +43,9 @@ valueRole | string | 弹出框值的模型角色。
4343
tooltipVisible | bool | 是否显示文字提示
4444
clearIconSource | enum | 清除图标源(来自 DelIcon)
4545
clearIconPosition | enum | 清除图标位置(来自 DelInput)
46-
defaulPopupMaxHeight | color | 默认弹出框最大高度
46+
clearIconSize | int | 清除图标大小
47+
defaultPopupMaxHeight | int | 默认弹出框最大高度
48+
defaultOptionSpacing | int | 默认选项间隔
4749
\n支持的函数：\n
4850
- \`clearInput()\` 清空输入 \n
4951
- \`openPopup()\` 打开弹出框 \n

‎DelegateUI_Qt5/gallery/qml/Gallery.qml

Lines changed: 110 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,119 @@ DelWindow {
104104
anchors.left: parent.left
105105
anchors.right: parent.right
106106

107+
DelAutoComplete {
108+
id: searchComponent
109+
property bool expanded: false
110+
z: 10
111+
clip: true
112+
width: (!galleryMenu.compactMode || expanded) ? (galleryMenu.defaultMenuWidth - 20) : 0
113+
anchors.top: parent.top
114+
anchors.left: !galleryMenu.compactMode ? galleryMenu.left : galleryMenu.right
115+
anchors.margins: 10
116+
topPadding: 6
117+
bottomPadding: 6
118+
rightPadding: 50
119+
placeholderText: qsTr('搜索组件')
120+
colorBg: galleryMenu.compactMode ? DelTheme.DelInput.colorBg : 'transparent'
121+
Component.onCompleted: {
122+
let model = [];
123+
for (let i = 0; i < galleryMenu.initModel.length; i++) {
124+
let item = galleryMenu.initModel[i];
125+
if (item && item.menuChildren) {
126+
for (let j = 0; j < item.menuChildren.length; j++) {
127+
let childItem = item.menuChildren[j];
128+
if (childItem && childItem.label) {
129+
model.push({
130+
'key': childItem.key,
131+
'value': childItem.key,
132+
'label': childItem.label,
133+
});
134+
}
135+
}
136+
}
137+
}
138+
model.sort((a, b) => a.key.localeCompare(b.key));
139+
options = model;
140+
}
141+
filterOption: function(input, option){
142+
return option.label.toUpperCase().indexOf(input.toUpperCase()) !== -1;
143+
}
144+
onSelect: function(option) {
145+
galleryMenu.gotoMenu(option.key);
146+
}
147+
labelDelegate: Text {
148+
height: implicitHeight + 4
149+
text: parent.textData
150+
color: DelTheme.DelAutoComplete.colorItemText
151+
font {
152+
family: DelTheme.DelAutoComplete.fontFamily
153+
pixelSize: DelTheme.DelAutoComplete.fontSize
154+
weight: parent.highlighted ? Font.DemiBold : Font.Normal
155+
}
156+
elide: Text.ElideRight
157+
verticalAlignment: Text.AlignVCenter
158+
}
159+
clearIconDelegate: Row {
160+
spacing: 5
161+
162+
DelIconText {
163+
visible: searchComponent.length > 0
164+
iconSource: DelIcon.CloseSquareFilled
165+
iconSize: searchComponent.iconSize
166+
colorIcon: searchComponent.enabled ?
167+
__iconMouse.hovered ? DelTheme.DelAutoComplete.colorIconHover :
168+
DelTheme.DelAutoComplete.colorIcon : DelTheme.DelAutoComplete.colorIconDisabled
169+
170+
Behavior on colorIcon { enabled: searchComponent.animationEnabled; ColorAnimation { duration: DelTheme.Primary.durationFast } }
171+
172+
MouseArea {
173+
id: __iconMouse
174+
anchors.fill: parent
175+
hoverEnabled: true
176+
cursorShape: parent.iconSource == searchComponent.clearIconSource ? Qt.PointingHandCursor : Qt.ArrowCursor
177+
onEntered: hovered = true;
178+
onExited: hovered = false;
179+
onClicked: searchComponent.clearInput();
180+
property bool hovered: false
181+
}
182+
}
183+
184+
DelIconText {
185+
iconSource: DelIcon.SearchOutlined
186+
iconSize: searchComponent.iconSize
187+
}
188+
}
189+
190+
Behavior on width {
191+
enabled: galleryMenu.compactMode && galleryMenu.width == galleryMenu.compactWidth
192+
NumberAnimation { duration: DelTheme.Primary.durationFast }
193+
}
194+
}
195+
196+
DelIconButton {
197+
id: searchCollapse
198+
visible: galleryMenu.compactMode
199+
anchors.top: parent.top
200+
anchors.left: galleryMenu.left
201+
anchors.right: galleryMenu.right
202+
anchors.margins: 10
203+
type: DelButton.Type_Text
204+
colorText: DelTheme.Primary.colorTextBase
205+
iconSource: DelIcon.SearchOutlined
206+
iconSize: searchComponent.iconSize
207+
onClicked: searchComponent.expanded = !searchComponent.expanded;
208+
onVisibleChanged: {
209+
if (visible) {
210+
searchComponent.closePopup();
211+
searchComponent.expanded = false;
212+
}
213+
}
214+
}
215+
107216
DelMenu {
108217
id: galleryMenu
109218
anchors.left: parent.left
110-
anchors.top: parent.top
219+
anchors.top: searchComponent.bottom
111220
anchors.bottom: aboutButton.top
112221
showEdge: true
113222
defaultMenuWidth: 300

‎DelegateUI_Qt5/src/imports/DelegateUI/Controls/DelAutoComplete.qml

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ DelInput {
1515
property string valueRole: 'value'
1616
property bool tooltipVisible: false
1717
property alias clearIconSource: control.iconSource
18+
property alias clearIconSize: control.iconSize
1819
property alias clearIconPosition: control.iconPosition
19-
property int defaulPopupMaxHeight: 240
20+
property int defaultPopupMaxHeight: 240
21+
property int defaultOptionSpacing: 0
2022

2123
property Component labelDelegate: Text {
2224
text: textData
@@ -51,14 +53,17 @@ DelInput {
5153
cursorShape: parent.iconSource == control.clearIconSource ? Qt.PointingHandCursor : Qt.ArrowCursor
5254
onEntered: hovered = true;
5355
onExited: hovered = false;
54-
property bool hovered: false
5556
onClicked: control.clearInput();
57+
property bool hovered: false
5658
}
5759
}
5860

5961
clearIconPosition: DelInput.Position_Right
6062
iconDelegate: clearIconDelegate
61-
onOptionsChanged: __private.model = options;
63+
onOptionsChanged: {
64+
__popupListView.currentIndex = -1;
65+
__private.model = options;
66+
}
6267
onTextEdited: {
6368
control.search(text);
6469
__private.filter();
@@ -70,9 +75,8 @@ DelInput {
7075

7176
function clearInput() {
7277
control.clear();
73-
control.search('');
78+
control.textEdited();
7479
__popupListView.currentIndex = -1;
75-
closePopup();
7680
}
7781

7882
function openPopup() {
@@ -103,7 +107,7 @@ DelInput {
103107
DelPopup {
104108
id: __popup
105109
implicitWidth: control.width
106-
implicitHeight: Math.min(control.defaulPopupMaxHeight, __popupListView.contentHeight) + topPadding + bottomPadding
110+
implicitHeight: Math.min(control.defaultPopupMaxHeight, __popupListView.contentHeight) + topPadding + bottomPadding
107111
leftPadding: 4
108112
rightPadding: 4
109113
topPadding: 6
@@ -144,6 +148,7 @@ DelInput {
144148
currentIndex: -1
145149
model: __private.model
146150
boundsBehavior: Flickable.StopAtBounds
151+
spacing: control.defaultOptionSpacing
147152
delegate: T.ItemDelegate {
148153
id: __popupDelegate
149154

@@ -159,6 +164,7 @@ DelInput {
159164
rightPadding: 8
160165
topPadding: 4
161166
bottomPadding: 4
167+
highlighted: __popupListView.currentIndex === index
162168
contentItem: Loader {
163169
sourceComponent: control.labelDelegate
164170
property alias textData: __popupDelegate.textData
@@ -175,7 +181,6 @@ DelInput {
175181
property alias hovered: __popupDelegate.hovered
176182
property alias highlighted: __popupDelegate.highlighted
177183
}
178-
highlighted: __popupListView.currentIndex === index
179184
onClicked: {
180185
control.select(__popupDelegate.modelData);
181186
control.text = __popupDelegate.valueData;

0 commit comments

Comments
 (0)