qml listview關鍵字高亮

研究了一天多，最終能實現的只有以下這種方案。view通過listmodel加載數據，但是 ，數據必須是經過整理的。才能實現關鍵字高亮。首先要把數據截取成一段一段的，再根據比較函數，確定是否高亮。最近研究qml頭發都白了。。。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.1

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
          width: 200; height: 200

          ListModel {
                id: fruitModel
                ListElement {
                    attributes: [
                        ListElement { description: "陳" },
                        ListElement { description: "奕迅" },
                        ListElement { description: "" }
                    ]
                }
                ListElement {
                    attributes: [
                        ListElement { description: "陳" },
                        ListElement { description: "雪" },
                        ListElement { description: "凝" }
                    ]
                }
                ListElement {
                    attributes: [
                        ListElement { description: "陳" },
                        ListElement { description: "莉" },
                        ListElement { description: "" }
                    ]
                }
            }
          Component {
              id: fruitDelegate
              Item {
                  width: 200; height: 50
                  Row {
                      Repeater {
                          model: attributes
                          Text {
                              text: description
                              color:description.indexOf("陳")>=0 ? "green":"blue"
                              font.pixelSize:30
                          }
                      }
                  }
              }
          }
          ListView {
              anchors.fill: parent
              model: fruitModel
              delegate: fruitDelegate
          }
      }

}

效果圖：

截取字符串，在qml中可以直接調用js的函數。截取字符串核心思想：一系列字符串，不管怎么截取，最多能變成一個大小為3的數組.有的時候是大小為2的數組。再根據數據，變換text文本的顏色

import QtQuick 2.0

Item {
    property string  souce_string
    property string  match_string
    property int     text_size
    property var     text_color
    property var theArray: []
    function match_search_string(souce_string,match_string)
    {
        console.log(souce_string.indexOf(match_string) )
        var c = souce_string.indexOf(match_string)
        console.log(souce_string.length )
        var first_string
        var second_string
        var third_string
        if(-1 !== c)
        {
            if(c === 0)
            {
                first_string = souce_string.substring(0,souce_string.indexOf(match_string)+match_string.length)
                theArray.push(first_string)
                second_string = souce_string.substring(souce_string.indexOf(match_string)+match_string.length,souce_string.length )
                if(second_string.length !== 0)
                {
                    theArray.push(second_string)
                }
            }
            else if(c !==0)
            {
                first_string = souce_string.substring(0,souce_string.indexOf(match_string))
                theArray.push(first_string)
                second_string = souce_string.substring(souce_string.indexOf(match_string),souce_string.indexOf(match_string)+match_string.length)
                theArray.push(second_string)
                third_string = souce_string.substring(souce_string.indexOf(match_string)+match_string.length,souce_string.length)
                if(third_string.length !== 0)
                {
                    theArray.push(third_string)
                }
            }
        }
    }


    Component.onCompleted:
        {
            match_search_string(souce_string,match_string)
            if(theArray.length ===0)
            {
                return
            }
            else
            {
                if(theArray.length ===3)
                {
                    first_text.text = theArray[0]
                    second_text.text = theArray[1]
                    second_text.color = text_color
                    third_text.text = theArray[2]
                }
                else
                {
                    if(souce_string.indexOf(match_string)===0)
                    {
                        first_text.text = theArray[0]
                        first_text.color = text_color
                        second_text.text = theArray[1]
                        third_text.visible = false
                    }
                    else
                    {
                        first_text.text = theArray[0]
                        second_text.text = theArray[1]
                        second_text.color = text_color
                        third_text.visible = false
                    }
                }
            }

        }
        Row
        {
            id: layout
            anchors.fill: parent
            Text{
                id:first_text
                font.pixelSize:text_size
            }
            Text{
                id:second_text
                font.pixelSize:text_size
            }
            Text{
                id:third_text
                font.pixelSize:text_size
            }
        }

}

這兩段代碼的結合我還沒有想好。。。先記錄下吧。。。。

 

以上方法，無法用append動態加載attributes的數據，總是出現壓蓋數據的問題，如果哪位網友能給我解答寫，更好了。

代碼就是這么寫的：fruitModel.append({"attributes": [{"description":"陳","description":"奕迅","description":""}]});這樣寫的效果就壓蓋了

坑爹呀，再也不想寫這個東西了，感覺快吐了。

不知道是不是qt的bug，又想出一種方法

 

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.1

Window {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
          width: 200; height: 300
          ListModel {
                id: fruitModel
            }
          Component {
              id: fruitDelegate
              Item {
                  width: 200; height: 50
                  Row {
                      Text{
                          text:first_text
                          color:first_text.indexOf("陳")>=0 ? "green":"blue"
                          font.pixelSize:30
                      }
                      Text{
                          text:second_text
                          color:second_text.indexOf("陳")>=0 ? "green":"blue"
                          font.pixelSize:30
                      }
                      Text{
                          text:third_text
                          color:third_text.indexOf("陳")>=0 ? "green":"blue"
                          font.pixelSize:30
                      }
                  }
              }
          }
          ListView {
              anchors.fill: parent
              model: fruitModel
              delegate: fruitDelegate
          }
          Button{
            x:320
            y:240
            onClicked: {
                fruitModel.append({"first_text": "陳","second_text": "奕迅","third_text": ""});
                fruitModel.append({"first_text": "陳","second_text": "雪凝","third_text": ""});
                fruitModel.append({"first_text": "陳","second_text": "麗","third_text": "麗"});
            }
          }
      }

}

 

效果圖：

 以上，應該就能通過append動態更新數據，從而達到效果，不過，list加載很慢。。。。我沒辦法了