Qml之基本控件
一.Qml常用控件
1.Text(显示普通文本和富文本)
1.1显示普通文本：
Window {
visible: true
width: 320
height: 240
title: qsTr("Hello World")
Text {
text: "Hello World!"
font.family: "Helvetica"
font.pointSize: 24
color: "red"
}
}
1.2显示富文本。
Window {
visible: true
width: 320
height: 240
title: qsTr("Hello World")
Text {
text: "<b>Hello</b> <i>World!</i>"
}
}
2.Button(按钮控件)
需要导入QtQuick.Controls 2.xx，如import QtQuick.Controls 2.12。
Window {
visible: true
width: 200
height: 120
title: qsTr("Hello World")
Button {
text: "Ok"
onPressed: { //下压
console.log("pressed " + text)
}
onReleased: { //释放
console.log("released " + text)
}
onClicked: { //单击，触发一次pressed和一次released
console.log("click " + text)
}
onDoubleClicked: { //双击
console.log("doubleClick " + text)
}
onPressAndHold: { //长按，下压后不松手一段时间后触发
console.log("pressAndHold " + text)
}
onCanceled: { //下压后，在释放之前失去焦点
console.log("cancel " + text)
}
}
}
onCanceled的触发方法：按住按钮不放，然后键盘按Alt+Tab，让它失去焦点。
3.RadioButton(单选按钮)
Window {
visible: true; width: 200; height: 200
ColumnLayout {
RadioButton {
checked: true
text: "r1"
}
RadioButton {
text: "r2"
}
RadioButton {
text: "r3"
}
}
}
4.CheckBox(多选按钮)
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Window {
visible: true; width: 200; height: 200
ColumnLayout {
CheckBox {
id: c1
checked: true
text: "c1"
}
CheckBox {
id: c2
checked: false
text: "c2"
}
CheckBox {
id: c3
checked: true
text: "c3"
}
}
Component.onCompleted: {
console.log(c1.checked)
console.log(c2.checked)
console.log(c3.checked)
}
}
5.ComboBox(下拉选项)
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true; width: 200; height: 200
ComboBox {
model: ["1111", "2222", "3333"]
onCurrentIndexChanged: {
console.log(currentIndex)
}
}
}
6.ListView(列表)
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true; width: 400; height: 300
Column {
ListView {
id: list
width: 100
height: 200
model: [
{ name: '宝马', price: '10'},
{ name: '奔驰', price: '50'},
{ name: '大众', price: '100'}
]
delegate: ItemDelegate {
width: list.width
text: modelData.name + ": " + modelData.price + (list.currentIndex === index ? ' √' : '')
background: Rectangle {
color: getColor()
function getColor() {
return Qt.rgba(Math.random(), Math.random(), Math.random())
}
}
onClicked: {
list.currentIndex = index
console.log(JSON.stringify(modelData))
}
}
ScrollBar.vertical: ScrollBar {}
}
Button {
onClicked: {
let model = list.model
model.push({name: "123", price: "123"})
list.model = model
}
}
}
}
7.Timer(定时器)
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true; width: 200; height: 120
Label {
Timer {
interval: 1000
repeat: true
running: true
triggeredOnStart: true
onTriggered: {
parent.text = Qt.formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')
}
}
}
}
8.SwipeView(滑动窗口)
说明：可以见手指滑动变换窗口
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true; width: 200; height: 120
SwipeView {
id: view
anchors.fill: parent
Repeater {
model: 3
Rectangle {
color: view.currentIndex == 0 ? 'red' : view.currentIndex == 1 ? 'yellow' : 'white'
Text {
anchors.centerIn: parent
text: 'text' + view.currentIndex
}
}
}
}
PageIndicator {
anchors.bottom: view.bottom
count: view.count
currentIndex: view.currentIndex
}
}
9.输入框
TextInput{
id:intpu_Z
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: parent.right
anchors.rightMargin: 5
anchors.verticalCenter: parent.verticalCenter
color: "white"
font{
pointSize: maps_Root.fontSize
bold: true
}
clip: true
}
10.Item
Item是基本的QML类型，所有可视类型都是Item的子类。
Item是QtQuick所有可视元素的基类，其属性有 x、y、width、height 、anchoring、key、z、rotation等，具体的使用如下，修改自定义Rectangle的显示位置等信息；
11.Rectangle
在 QML 中，Rectangle 是一个常用的基础图形元素，用于绘制矩形形状。它继承自 Item 并提供了额外的属性来定义矩形的尺寸、颜色、边框等。
以下是一些 Rectangle 元素的关键属性和用法示例：
关键属性
width 和 height：定义矩形的宽度和高度。
color：定义矩形的填充颜色。
border.color：定义矩形边框的颜色。
border.width：定义矩形边框的宽度。
radius：定义矩形角的圆度，用于创建圆角矩形。
gradient：定义矩形的渐变填充，而不是纯色填充。
用法示例
以下是一个简单的 QML 示例，展示了如何使用 Rectangle 元素：
import QtQuick 2.15
Rectangle {
width: 200
height: 100
color: "blue"
border.color: "black"
border.width: 4
radius: 10
// 在矩形中添加文本
Text {
text: "Hello, Rectangle!"
color: "white"
anchors.centerIn: parent // 使文本在矩形中居中
}
}
12.Dialog
import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
ApplicationWindow{
visible: true;
width: 1280;
height: 720;
Dialog {
id: dialog
x:(parent.width-width)/2
y:(parent.height-height)/2
implicitWidth: 500;
implicitHeight: 300;
title: "Title"
modal: true;
standardButtons: Dialog.Ok | Dialog.Cancel
onAccepted: console.log("Ok clicked")
onRejected: console.log("Cancel clicked")
}
Button{
text: "open";
onClicked: {
dialog.open();
}
}
}