添加tag组件

AicsKnowledgeBase/qml/component/Tag.qml

@@ -0,0 +1,167 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import FluentUI
+
+Rectangle {
+    id: input
+
+    width: 300
+    height: 32
+
+    radius: 5
+    clip: true
+    border.color: textInput.activeFocus ? "#268CDC":"#979592" //gray100
+    ListModel { id: tagListModel }
+
+
+
+    Row {
+        x: 5
+        height: parent.height
+        spacing: 5
+
+        Row {
+            id: rowTag
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 5
+
+            Repeater {
+                model: tagListModel
+
+                Loader {
+                    sourceComponent: tagItem
+                    Component.onCompleted: {
+                        item.closeClicked.connect(function(){
+                            tagListModel.remove(index)
+                        })
+
+                        item.tag = Qt.binding(function(){return tag})
+                    }
+                }
+            }
+        }
+
+        Item {
+            width: input.width - rowTag.width
+            height: parent.height
+
+            TextField {
+                id:textInput
+                placeholderText: qsTr("按回车键Enter创建标签")
+
+
+                anchors.verticalCenter: parent.verticalCenter
+                width: parent.width - 15
+                clip: true
+
+                background: Rectangle {
+                }
+
+                Keys.onReturnPressed: {
+                    if (text.length === 0)
+                        return
+
+
+                    tagListModel.append({"tag": text})
+                    //console.log(tagListModel.get(0))
+                    text = ""
+                }
+
+                Keys.onPressed: {
+                    if (event.key === Qt.Key_Backspace) {
+                        if (text.length === 0 && tagListModel.count) {
+                            tagListModel.remove(tagListModel.count-1)
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+
+    property Component tagItem:
+        Rectangle {
+        id: rootTagItem
+        property alias tag: tagText.text
+        signal closeClicked()
+
+        width: content.width
+        height: 25
+        radius: 5
+        border.color: "#77c7ff"
+
+        MouseArea {
+            id: mouseArea
+            property bool hovered: false
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: hovered = true
+            onExited: hovered = false
+
+            Row {
+                id: content
+                anchors.verticalCenter: parent.verticalCenter
+                height: rootTagItem.height
+
+                Item { width: 5; height: 1 }
+
+                Text {
+                    id: tagText
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.pixelSize: rootTagItem.height * 0.5
+                    text: "Hello"
+                    color: rootTagItem.border.color
+                }
+
+                Item { visible: mouseArea.hovered; width: 5; height: 1 }
+
+                Item {
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: mouseArea.hovered ? 15 : 0
+                    height: rootTagItem.height
+                    visible: mouseArea.hovered
+                    Behavior on width {
+                        NumberAnimation {duration: 100}
+                    }
+
+                    Behavior on visible {
+                        NumberAnimation {duration: 100}
+                    }
+
+                    Rectangle {
+                        width: height
+                        height: parent.height * 0.6
+                        anchors.centerIn: parent
+                        radius: height
+                        color: closeMouseArea.pressed ? "gray" : "red"
+                        visible: closeMouseArea.hovered
+                    }
+
+                    Text {
+                        anchors.centerIn: parent
+                        text: "×"
+                        color: closeMouseArea.hovered ? "white" : rootTagItem.border.color
+                    }
+
+                    MouseArea {
+                        id: closeMouseArea
+                        property bool hovered: false
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onEntered: hovered = true
+                        onExited: hovered = false
+                        onCanceled: hovered = false
+                        onClicked: rootTagItem.closeClicked()
+                    }
+                }
+
+                Item { width: 5; height: 1 }
+            }
+        }
+    }
+}
+