QML实现单选按钮(2)

这里使用了高亮代理


import QtQuick 2.0

Item {
    id: root

    width: 1920
    height: 1080

    Component {
        id: highlightDelegate
        Rectangle {
            width: 100
            height: 50
            color: "transparent"
            border.color: "red"
            z:1
        }
    }

    ListView {
        width: 600
        height: 800
        anchors.centerIn: parent

        model: 5
        delegate: Rectangle {
            id: delegateItem
            width: 100
            height: 50
            color: "lightblue"
            Text {
                anchors.centerIn: parent
                text: index
                font.pixelSize: 30
            }
            border.color: "black"

            MouseArea {
                anchors.fill: parent
                onClicked:  delegateItem.ListView.view.currentIndex = index
            }
        }
        highlight: highlightDelegate
    }


}

转载于:https://www.cnblogs.com/xuexiwrite/p/9722017.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在QML实现多页的切换,可以使用`StackView`组件和按钮实现。`StackView`用于管理多个页面,并提供了一种简单的方式来切换页面。 以下是一个示例代码,展示了如何使用按钮来切换多个页面: ```qml import QtQuick 2.0 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { visible: true width: 400 height: 300 StackView { id: stackView anchors.fill: parent initialItem: page1 Component.onCompleted: { stackView.push(page1); // 初始页面 } } RowLayout { anchors.bottom: parent.bottom spacing: 10 Button { text: "Page 1" onClicked: stackView.push(page1) } Button { text: "Page 2" onClicked: stackView.push(page2) } Button { text: "Page 3" onClicked: stackView.push(page3) } } Component { id: page1 Rectangle { width: stackView.width height: stackView.height color: "lightblue" Text { text: "Page 1" font.pixelSize: 20 anchors.centerIn: parent } } } Component { id: page2 Rectangle { width: stackView.width height: stackView.height color: "lightgreen" Text { text: "Page 2" font.pixelSize: 20 anchors.centerIn: parent } } } Component { id: page3 Rectangle { width: stackView.width height: stackView.height color: "lightpink" Text { text: "Page 3" font.pixelSize: 20 anchors.centerIn: parent } } } } ``` 在上面的例子中,我们使用`StackView`作为主要的页面管理器,并在底部使用`RowLayout`来放置按钮。 每个按钮都有一个`onClicked`事件处理程序,当按钮被点击时,我们使用`stackView.push()`函数将相应的页面推入`StackView`中。 每个页面都是通过`Component`定义的,其中包含一个带有文本的矩形。你可以根据需要自定义页面的内容和样式。 通过点击按钮,你可以在应用程序中切换不同的页面。这种方式可以用于创建多页应用程序、导航界面等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值