import QtQuick 2.15 import QtQuick.Controls 2.15 import FluentUI 1.0 TextField{ property var values:[] property int fontStyle: FluText.Body property int pixelSize : FluTheme.textSize id:input width: 300 color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" selectionColor: { if(FluTheme.isDark){ return FluTheme.primaryColor.lighter }else{ return FluTheme.primaryColor.dark } } placeholderTextColor: { if(focus){ return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) } return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) } rightPadding: 30 selectByMouse: true font.bold: { switch (fontStyle) { case FluText.Display: return true case FluText.TitleLarge: return true case FluText.Title: return true case FluText.Subtitle: return true case FluText.BodyLarge: return false case FluText.BodyStrong: return true case FluText.Body: return false case FluText.Caption: return false default: return false } } font.pixelSize: { switch (fontStyle) { case FluText.Display: return input.pixelSize * 4 case FluText.TitleLarge: return input.pixelSize * 2 case FluText.Title: return input.pixelSize * 1.5 case FluText.Subtitle: return input.pixelSize * 0.9 case FluText.BodyLarge: return input.pixelSize * 1.1 case FluText.BodyStrong: return input.pixelSize * 1.0 case FluText.Body: return input.pixelSize * 1.0 case FluText.Caption: return input.pixelSize * 0.8 default: return input.pixelSize * 1.0 } } background: FluTextBoxBackground{ inputItem: input FluIconButton{ icon:FluentIcons.FA_close iconSize: 14 width: 20 height: 20 opacity: 0.5 visible: input.text !== "" anchors{ verticalCenter: parent.verticalCenter right: parent.right rightMargin: 5 } onClicked:{ input.text = "" } } } Component.onCompleted: { searchData() } Popup{ id:input_popup visible: input.focus y:input.height onClosed: { input.focus = false } background: Rectangle{ width: input.width radius: 4 FluShadow{ radius: 4 } color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(243/255,241/255,240/255,1) height: 38*Math.min(Math.max(list_view.count,1),8) ListView{ id:list_view signal closePopup anchors.fill: parent boundsBehavior: ListView.StopAtBounds clip: true header: Item{ width: input.width height: visible ? 38 : 0 visible: list_view.count === 0 FluText{ text:"没有找到结果" anchors{ verticalCenter: parent.verticalCenter left: parent.left leftMargin: 10 } } } ScrollBar.vertical: ScrollBar { } delegate: Item{ height: 38 width: input.width Rectangle{ anchors.fill: parent anchors.topMargin: 2 anchors.bottomMargin: 2 color: { if(item_mouse.containsMouse){ return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(234/255,234/255,234/255,1) } return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(243/255,241/255,240/255,1) } radius: 3 MouseArea{ id:item_mouse anchors.fill: parent hoverEnabled: true onClicked: { input_popup.close() input.text = modelData } } FluText{ text:modelData anchors{ verticalCenter: parent.verticalCenter left: parent.left leftMargin: 10 } } } } } } } onTextChanged: { searchData() } function searchData(){ var result = [] values.map(function(item){ if(item.indexOf(input.text)!==-1){ result.push(item) } }) list_view.model = result } }