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

(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切换
}
}
}

猜你喜欢

转载自blog.csdn.net/ipfpm/article/details/81562052
今日推荐