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 
    } 
}