Qt，QML ListView和桌面應用程序

Question

我的問題是一種兩部分條件問題。我有一個我用C++/Qt編寫的桌面應用程序。在應用程序中，我有幾個我想要裝飾的列表，並添加帶有圖標和豐富文本的列表項。

我第一次嘗試在QWidget世界做到這一點，但是我越看越它，我越是認爲QML可能是更好的選擇。但是現在我也很想知道這一點，因爲QML似乎更適合觸摸屏設備。更不用說我在QML方面取得的進展一直在fr。。給他們QML下面，我無法弄清楚如何：（1）獲得一個項目的突出，當我點擊它，（2）增加一個滾動條：

import QtQuick 1.0 

Item 
{ 
    width: 300 
    height: 200 

    ListModel 
    { 
     id: myModel2 

     ListElement { text: "List Item 1" } 
     ListElement { text: "List Item 2" } 
     ListElement { text: "List Item 3" } 
     ListElement { text: "List Item 4" } 
     ListElement { text: "List Item 5" } 
     ListElement { text: "List Item 6" } 
    } 

    Component 
    { 
     id: beerDelegate 

     Rectangle 
     { 
      id: beerDelegateRectangle 
      height: beerDelegateText.height * 1.5 
      width: parent.width 

      Text 
      { 
       id: beerDelegateText 
       text: "<b>" + modelData + "</b> <i>(" + modelData + ")</i>" 
      } 

      MouseArea 
      { 
       anchors.fill: parent 
       onClicked: 
       { 
        console.log("clicked: " + modelData + " at index: " + index); 
        beerList.currentIndex = index; 
       } 
      } 
     } 
    } 

    ListView 
    { 
     id: beerList 
     anchors.fill: parent 
     model: myModel2 
     delegate: beerDelegate 

     highlightFollowsCurrentItem: true 
     highlight: Rectangle 
     { 
      width: parent.width 
      color: "red" 
     } 

     focus: true 
    } 
} 

我怎麼能做到什麼，我找鑑於這個QML？或者在QWidget桌面應用程序中使用QML只是一個壞主意？

Answer 1

對於第一個問題（高亮）：

你的名單實際上吸引的亮點，然而，與一個白色矩形您的項目委託overpaints這個！只是與項目取代矩形，它的工作原理：

Component 
{ 
    id: beerDelegate 

    Item 
    { 
     ... 
    } 
} 

對於第二個問題（滾動條）：

據我所知，QML不提供滾動條開箱。然而，Qt Desktop Components project（git repository）可讓您訪問QML世界中的大多數小部件。其中，有一個ScrollArea。

Answer 2

對於第二個問題。即ListView上的滾動條： 我在ListView上創建了滾動條的代碼。它還可以在GridView的工作

ScrollBar.qml

import Qt 4.7 

Item { 
    property variant target 

    width: 8 
    anchors.top: target.top 
    anchors.bottom: target.bottom 
    anchors.margins: 1 
    anchors.rightMargin: 2 
    anchors.bottomMargin: 2 
    anchors.right: target.right 
    visible: (track.height == slider.height) ? false : true 

    Image { 
     id: scrollPath 
     width: 2 
     anchors.top: parent.top 
     anchors.bottom: parent.bottom 
     anchors.horizontalCenter: parent.horizontalCenter 
     source: "qrc:/resources/buttons/slider2.png" 
    } 

    Item { 
     anchors.fill: parent 

     Timer { 
      property int scrollAmount 

      id: timer 
      repeat: true 
      interval: 20 
      onTriggered: { 
       target.contentY = Math.max(0, Math.min(target.contentY + scrollAmount, 
                 target.contentHeight - target.height)); 
      } 
     } 

     Item { 
      id: track 
      anchors.top: parent.top 
      anchors.topMargin: 1 
      anchors.bottom: parent.bottom 
      width: parent.width 

      MouseArea { 
       anchors.fill: parent 
       onPressed: { 
        timer.scrollAmount = target.height * (mouseY < slider.y ? -1 : 1) 
        timer.running = true; 
       } 
       onReleased: { 
        timer.running = false; 
       } 
      } 

      Image { 
       id:slider 
       anchors.horizontalCenter: parent.horizontalCenter 
       source: "qrc:/resources/buttons/slider.png" 
       width: parent.width 
       height: Math.min(target.height/target.contentHeight * track.height, track.height) < 20 ? 20 : Math.min(target.height/target.contentHeight * track.height, track.height) 
       y: target.visibleArea.yPosition * track.height 

       MouseArea { 
        anchors.fill: parent 
        drag.target: parent 
        drag.axis: Drag.YAxis 
        drag.minimumY: 0 
        drag.maximumY: track.height - height 

        onPositionChanged: { 
         if (pressedButtons == Qt.LeftButton) { 
          target.contentY = slider.y * target.contentHeight/track.height; 
         } 
        } 
       } 
      } 
     } 
    } 
} 

我使用滾動條項目與ListView控件在MyListView.qml爲：

MyListView.qml

ListView { 
    id: list 
    clip: true 
    anchors.margins: 5 
    anchors.fill: parent 
    model: 10 
    delegate: trackRowDelegate 
    interactive: contentHeight > height 
} 

ScrollBar { 
    id: verticalScrollBar 
    target: list 
    clip: true 
} 

此ScrollBar項目可與GridView一起使用，因爲

GridView { 
    id: grid 
    clip: true 
    anchors.margins: 5 
    anchors.fill: parent 
    cellWidth:100 
    cellHeight: 100 
    model: items 
    interactive: contentHeight > height 
    snapMode: GridView.SnapToRow 
    delegate: myDelegate 
} 

ScrollBar { 
    id: verticalScrollBar 
    target: grid 
    clip: true 
    visible: grid.interactive 
} 

Answer 3

不再需要自己實現滾動條。有ScrollView -Item自Qt 5.1。只需圍繞一個Flickable-Item（例如您使用的ListView項目，也是「Flickable」），您將會很好：

ScrollView { 
    ListView { 
     id: beerList 
     anchors.fill: parent 
     model: myModel2 
     delegate: beerDelegate 

     highlightFollowsCurrentItem: true 
     highlight: Rectangle 
     { 
      width: parent.width 
      color: "red" 
     } 

     focus: true 
    } 
}