【QT】QT的学习:qml中使用listmode、listview实现选项的变换操作，类似qwidget中listwidget的作用。

最新推荐文章于 2024-01-26 11:45:56 发布

ipfpm

最新推荐文章于 2024-01-26 11:45:56 发布

阅读量1.6k

点赞数

(1)方法一：点击某一选项，某一个选项的颜色就立即会发生变化

ListView {
id : m_listView
anchors.fill: parent
anchors.margins: 20
clip: true
model: ["A","B","C","D","E"]
delegate: m_listDelegate
spacing: 5
focus: true
}

Component {
id: m_listDelegate

Rectangle {
width: ListView.view.width
height: 40
color: ListView.isCurrentItem?"#157efb":"#53d769" //选中颜色设置
border.color: Qt.lighter(color, 1.1)
Text {
anchors.centerIn: parent
font.pixelSize: 10
text: modelData + index
}

MouseArea {
anchors.fill: parent
onClicked: m_listView.currentIndex = index  //实现item切换
}
}
}

(2)方法二：点击某一选项，某一个选项的颜色就会从别的选项移动过来，移动的比较慢就跟动画一样。

ListView {
id : m_listView
anchors.fill: parent
anchors.margins: 20
clip: true
model: ["A","B","C","D","E"]
delegate: m_listDelegate

highlight: Rectangle{
        color: "lightblue"//高亮条
    }
 highlightFollowsCurrentItem: true//高亮条随着item的变化而移动
spacing: 5
focus: true
}

Component {
id: m_listDelegate

Rectangle {
width: ListView.view.width
height: 40
border.color: Qt.lighter(color, 1.1)
Text {
anchors.centerIn: parent
font.pixelSize: 10
text: modelData + index
}

MouseArea {
anchors.fill: parent
onClicked: m_listView.currentIndex = index  //实现item切换
}
}
}