Qt官方示例-QML标签页
2023-06-13 09:17:28 时间
❝TabWidget示例演示了如何使用属性别名和QML Object默认属性创建标签页。❞
TabWidget.qml
Item {
id: tabWidget
// 核心实现
// 将默认属性设置为stack.children意味着TabWidget的所有子项实际上都已添加到"stack"项的子项中。
// 有关默认属性的详细信息,请参见"Property Binding"文档。
default property alias content: stack.children
property int current: 0
onCurrentChanged: setOpacities()
Component.onCompleted: setOpacities()
function setOpacities() {
for (var i = 0; i < stack.children.length; ++i) {
stack.children[i].opacity = (i == current ? 1 : 0)
}
}
Row {
id: header
Repeater {
model: stack.children.length
delegate: Rectangle {
width: tabWidget.width / stack.children.length; height: 36
Rectangle {
width: parent.width; height: 1
anchors { bottom: parent.bottom; bottomMargin: 1 }
color: "#acb2c2"
}
BorderImage {
anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1 }
border { left: 7; right: 7 }
source: "tab.png"
visible: tabWidget.current == index
}
Text {
horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter
anchors.fill: parent
text: stack.children[index].title
elide: Text.ElideRight
font.bold: tabWidget.current == index
}
MouseArea {
anchors.fill: parent
onClicked: tabWidget.current = index
}
}
}
}
Item {
id: stack
width: tabWidget.width
anchors.top: header.bottom; anchors.bottom: tabWidget.bottom
}
}
使用
TabWidget {
id: tabs
width: 640; height: 480
Rectangle {
property string title: "Red"
anchors.fill: parent
color: "#e3e3e3"
Rectangle {
anchors.fill: parent; anchors.margins: 20
color: "#ff7f7f"
Text {
width: parent.width - 20
anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
text: "Roses are red"
font.pixelSize: 20
wrapMode: Text.WordWrap
}
}
}
Rectangle {
property string title: "Green"
anchors.fill: parent
color: "#e3e3e3"
Rectangle {
anchors.fill: parent; anchors.margins: 20
color: "#7fff7f"
Text {
width: parent.width - 20
anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
text: "Flower stems are green"
font.pixelSize: 20
wrapMode: Text.WordWrap
}
}
}
Rectangle {
property string title: "Blue"
anchors.fill: parent; color: "#e3e3e3"
Rectangle {
anchors.fill: parent; anchors.margins: 20
color: "#7f7fff"
Text {
width: parent.width - 20
anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
text: "Violets are blue"
font.pixelSize: 20
wrapMode: Text.WordWrap
}
}
}
}
关于更多
- 在「QtCreator软件」可以找到:
- 或在以下「Qt安装目录」找到:
C:\Qt\{你的Qt版本}\Examples\{你的Qt版本}\quick\customitems\tabwidget
- 「相关链接」
https://doc.qt.io/qt-5/qtquick-customitems-tabwidget-example.html
- 关于默认属性,请查看往期(2019-06-23)推文《Qml好用的default附加属性》。
相关文章
- python qt是什么_初识Python与Qt「建议收藏」
- Qt中实现QQ抽屉效果
- Python3 :PyCharm + Qt designer 学习 + 实例[通俗易懂]
- Qt-Windows下发布应用程序
- C/C++ Qt 数据库与SqlTableModel组件应用
- C/C++ Qt QThread 线程组件应用
- 76.qt qml-QianWindow开源炫酷界面框架(支持白色暗黑渐变自定义控件均以适配)
- Qt官方示例-拖动图标
- Qt官方示例-DTLS服务器
- Qt官方示例-数据库浏览器
- Qt官方示例-俄罗斯方块
- Qt实验性项目-Http服务器
- Qt官方示例-通讯录
- Qt官方示例-字体采样器
- Linux下开发Qt应用程序的技术指南(Linux和qt)
- 使用Qt快速设置Linux时间(qt设置linux时间)
- 调试Linux下Qt的调试实践指南(linux下qt)
- Linux下Qt实现串口通信(linux下qt串口)
- 如何在Linux下编译Qt?(linux下编译qt)
- linux系统启动Qt图形界面简易指南(linux启动qt)
- 使用QT操作MySQL数据库(qt的mysql数据库)
- Qt跨平台编译MySQL驱动实践(qt编译mysql驱动)
- 集成开发Linux与Qt集成开发:实现无缝交互(linux与qt)
- 提高数据处理效率:探究Qt与MySQL数据库的结合应用(qt与mysql数据库)
- Qt在Linux操作系统中的运行和应用(qt运行linux)
- 如何在Linux上运行QT程序?(linux运行qt程序)
- Qt如何编译Oracle数据库驱动(qt编译oracle驱动)
- 从 Qt 中编译到 MySQL 的进程(qt mysql 编译)