はじめに
ListViewはデフォルトではアイテムを自動的に選択しません。結局のところ、QtのListViewは複雑で強力です
ソリューション
セットidControl.ListView.view.currentIndex =マウスが項目をクリックしたときのインデックス; idControlは実装するデリゲート項目のIDを表します。これはコンポーネントのIDではないことに注意してください
代码
import QtQuick 2.0
インポートQtQuick.Controls 1.4
インポートQtQuick.Layouts 1.1
インポートQtQuick.Controls.Styles 1.4
長方形
{
anchors.rightMargin：4
anchors.bottomMargin：4
anchors.leftMargin：4
anchors.topMargin：4
anchors.fill：parent
ColumnLayout
{
// clip：true
spacing：2
anchors.fill：parent
Rectangle
{
// color： "yellow"
Layout.fillWidth：true
Layout.fillHeight：true
RowLayout {
anchors.fill：parent
Rectangle
{
Layout.fillWidth：true
Layout.fillHeight：true
ListView {
id：idLogListView
focus：true
//Keys.enabled：true
// highlightRangeMode：ListView.ApplyRange
anchors.fill：parent
highlight：Rectangle {color： "＃00CED1"}
model：idListModle
delegate：Component
{
RowLayout {
id：idlistElemnet
高さ：20
幅：parent.width
間隔：20
Layout.fillWidth：true
長方形{高さ：16
幅：16
半径：5
color：getListEleHeadColor（type）
Text {anchors.centerIn：parent}
}
テキスト{テキスト：時間; font.bold：true}
Text {text：type}
Text {text：descripe; 青色" ; Layout.fillWidth：true}
状態：状態{
名前： "現在"の
場合：idlistElemnet.ListView.isCurrentItem
PropertyChanges {ターゲット：idlistElemnet; X：20}
}
の遷移：遷移{
NumberAnimation {プロパティ： "X"; 期間：200}
}
MouseArea {
anchors.fill：parent
onClicked：idlistElemnet.ListView.view.currentIndex = index
}
}
}
Component.onCompleted：
{
for（var idx = 0; idx <100; idx ++）
{
var newType = parseInt（（Math.random（Math.random（））* 100 + 1）％3）;
idListModle.append（{"descripe"： "系统日志...................."、 "time"： "2016-10-2"、 "type"：新しいタイプ}）;
}
}
}
ListModel {
id：idListModle
ListElement {
descripe： "システムログ..............."
時間： "2016-11-2"
タイプ：1
}
}
}
長方形
{
Layout.fillHeight：true
//スクロールバー
id：スクロールバーの
幅：10;
高さ：380
色： "＃D9D9D9"
半径：10
//钮
Rectangle {
id：button
x：0
y：idLogListView.visibleArea.yPosition * scrollbar.height
width：10
height：idLogListView.visibleArea.heightRatio * scrollbar.height;
color： "＃979797"
radius：10
//鼠标区
域MouseArea {
id：mouseArea
anchors.fill：button
drag.target：button
drag.axis：Drag.YAxis
drag.minimumY：0
drag.maximumY：scrollbar.height-button.height
//拖动
onMouseYChanged：{
idLogListView.contentY = button.y / scrollbar。 height * idLogListView.contentHeight
}
}
}
}
}
}
長方形
{
Layout.preferredHeight：40
Layout.fillWidth：true
Layout.minimumHeight：40
}
}
function getListEleHeadColor（ntype）
{
switch（ntype）
{
ケース0：
「水色」を返す
ケース1：
「赤」を返す;
ケース2：
「黄色」を返す。
ケース3：
「緑」を返します。
デフォルト：
「黒」を返します。
}
}
}
