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();

        }

    }

}