2023-03-09 15:49:37 +08:00
|
|
|
|
import QtQuick 2.15
|
|
|
|
|
import QtQuick.Controls 2.15
|
|
|
|
|
import FluentUI 1.0
|
|
|
|
|
|
|
|
|
|
TextField{
|
2023-03-09 23:11:59 +08:00
|
|
|
|
|
|
|
|
|
property var values:[]
|
|
|
|
|
property int fontStyle: FluText.Body
|
|
|
|
|
property int pixelSize : FluTheme.textSize
|
|
|
|
|
|
2023-03-09 15:49:37 +08:00
|
|
|
|
id:input
|
|
|
|
|
width: 300
|
|
|
|
|
color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
|
|
|
|
|
selectionColor: {
|
|
|
|
|
if(FluTheme.isDark){
|
|
|
|
|
return FluTheme.primaryColor.lighter
|
|
|
|
|
}else{
|
|
|
|
|
return FluTheme.primaryColor.dark
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-03-09 23:11:59 +08:00
|
|
|
|
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)
|
|
|
|
|
}
|
2023-03-09 15:49:37 +08:00
|
|
|
|
rightPadding: 30
|
|
|
|
|
selectByMouse: true
|
2023-03-09 23:11:59 +08:00
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-03-09 15:49:37 +08:00
|
|
|
|
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
|
2023-03-09 23:11:59 +08:00
|
|
|
|
leftMargin: 10
|
2023-03-09 15:49:37 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|