qml练习(小demo)

实现了如下效果

点击下方的按钮可以把标签加入到上方的矩形text中，如果重复的话再次点击能删除

点击查看代码

Window
{
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ListModel
    {
        id:mymodel
        ListElement{name:"胡桃";color:"red"}
        ListElement{name:"芙宁娜";color:"blue"}
        ListElement{name:"娜维娅";color:"lightyellow"}
        ListElement{name:"丝柯克";color:"lightblue"}
        ListElement{name:"希格雯";color:"blue"}
        ListElement{name:"温蒂";color:"lightgreen"}
        ListElement{name:"影";color:"Purple"}
    }
    property string type_interesting: "已选择的标签:"
    property string selectedTags:""//添加目标的标签
    Column
    {
        anchors.fill: parent
        padding: 1
        spacing: 1
        Text
        {
            id: mytext
            width: parent.width
            height: 50
            color: "black"
            font.pixelSize: 20
            text: "请选择标签"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
        Rectangle
        {
            id:interesting_rect
            color:"grey"
            width: parent.width
            height: 100
            radius: 10
            Text {
                id: interesting
                text: type_interesting+selectedTags
                color:"white"
                font.pixelSize: 17
                anchors.centerIn: parent
            }
        }
        Rectangle
        {
            width: parent.width
            height: 150
            border.width: 2
            border.color: "grey"
            radius: 10
            Grid
            {
                anchors.fill: parent
                padding: 5
                columnSpacing: 5
                rowSpacing: 3
                Repeater
                {
                    model:mymodel
                    delegate: Button
                    {
                        width:80
                        height: 50
                        font.pixelSize: 20
                        text: qsTr(model.name)
                        background:Rectangle
                        {
                            radius:5
                            color:model.color
                        }
                        onClicked:
                        {
                            let name = model.name
                            // 把字符串转数组方便增删
                            //把整个字符串按照" "分成数组
                            let tagArr = selectedTags.split(" ")
                            //判断数组中是否有name这个数据
                            let index = tagArr.indexOf(name)
                            //如果不包含就添加
                            if(index===-1)
                            {
                                tagArr.push(name)
                                console.log("不包含",name)
                            }
                            else
                            {
                                tagArr.splice(index,1)
                                console.log("包含",name)
                            }
                            //将数组中内容重新拼接为字符串
                            selectedTags = tagArr.join(" ")
                            console.log(selectedTags)
                        }
                    }
                }
            }
        }
    }
}