Qt Quick快速入门笔记

Qt Quick快速入门笔记

• 基本的程序结构

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
  	// 引擎加载qml
    engine.load(url);

    return app.exec();
}

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
   
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

• Window

查看qml渲染效果

选中对应qml-> 顶部工具 ->外部-> Qt Quick -> Qt Qucik Preview

基础组件体验

Item

Item是Qt Quick所有可视元素的基类，定义了大部分属性，包括。x,y,z,width,height,anchors,按键响应等。可以将多个Item嵌套在一起形成复杂界面布局.z数值越大，越在图层上面

Item {
   
   focus: true
   // 回车按键响应
   Keys.onReturnPressed: console.log("Pressed return");
}

Rectangle

矩形区域,提供颜色、边框、圆角属性等

Rectangle {
   
     width: 100
     height: 100
     color: "red"
     // color: Qt.rgba(0.4,0.5,0.8,1)
     border.color: "black"
     border.width: 5
     radius: 10
     anchors.centerIn: parent
     Component.onCompleted:
     {
   
         console.log("Rectangle Completed!")
     }
 }

anchors 锚布局

指定控件与其他控件之间的位置关系centerIn、left、right、top、bottom、horizontalCenter、verticalCenter等

Rectangle {
   
    id: test
     width: 100
     height: 100
     color: Qt.rgba(0.4,0.5,0.8,1)
     border.color: "black"
     border.width: 5
     radius: 10
     anchors.centerIn: parent
 }

Button {
   
  // Button 左边靠着Rectangle 间隔20，顶部y持平
    anchors.left: test.right
    anchors.leftMargin: 20
    anchors.top: test.top
    text: "Ok"
    onClicked: console.log("click button")
}

Text

Text支持多种文本格式html、markdown

Text {
   
  text: "Hello World!"
  font.family: "Helvetica"
  color: "red"
   // 字体自适应
  fontSizeMode: Text.Fit
  font.pixelSize:  50 // 字体最大尺寸
  minimumPixelSize: 12 // 字体最小尺寸
}

Label

Label
{
   
    id: username
    font.pixelSize: 22
    font.italic: true
    color: "steelblue"
    text: "账号:"
}

TextField

TextField
{
   
    placeholderText: "请输入用户名"
    x: 10
    y: 10
    background: Rectangle
    {
   
        implicitHeight: 40
        implicitWidth: 200
        color: "red"
        border.color: "black"
    }
    // 密码样式
    echoMode: TextInput.Password
}

TextInput

TextInput与TextField类似

TextInput没有背景是透明的

TextField有背景色

MouseArea {
   
  anchors.fill: parent
  onClicked: () => {
   
    // 获取验证结果
     console.log("result = ", testValidator.acceptableInput)
  }
}

TextInput
{
   
  id: testValidator
  x: 10
  y: 10
  width: 100
  height: 30
  // 验证输入
  validator: IntValidator{
    bottom: 100; top: 999}
}

TextEdit

MouseArea {
   
    anchors.fill: parent
    onClicked: () => {
   
       console.log("selectionStart = ", edit.selectionStart)
       console.log("selectionEnd = ", edit.selectionEnd)
       console.log("selectedText = ", edit.selectedText)
       
       // 搜索文本
       var tex = edit.getText(0, edit.text.length)
       console.log("tex = ", tex)
       let index = tex.indexOf("el")
       console.log("index = ", index)
    }
}

TextEdit {
   
    id: edit
    width: 240
    text: "<b>Hello</b> <i>World!</i>"
    font.family: "Helvetica"
    font.pointSize: 20
    color: "blue"
    focus: true
    // persistentSelection: true
}

TextArea

TextArea
{
   
 x: 10
 y: 20
 background: Rectangle
 {
   
     implicitWidth: 100
     implicitHeight: 80
     border.color: "blue"
     border.width: 2
 }

 placeholderText: "请输入多行文本"
 font.pixelSize: 18
 color: "red"
}

// 滚动条
ScrollView {
   
    width: 100
    height: 200
    TextArea
    {
   
     x: 10
     y: 20
     background: Rectangle
     {
   
         implicitWidth: 100
         implicitHeight: 80
         border.color: "blue"
         border.width: 2
     }

     placeholderText: "请输入多行文本"
     font.pixelSize: 18
     color: "red"
    }
}

Button

Button系列包括：CheckBox(勾选框)、DelayButton(延时按钮)、RadioButton(单选框)、RoundButton(圆形按钮)、Switch(开关)、ToolButton

Button {
   
    anchors.centerIn: parent
    text: "Ok"
    onClicked: console.log("click button")
}

// buttonStyle案例
Component {
   
    id: mystyle

    // 自定义按钮外观
    ButtonStyle {
   
        background: Rectangle {
   
            implicitHeight: 45
            implicitWidth: 150
            radius: 10
            border.width: 2
            border.color: "red"
            //color: "blue"
        }
    }
    
     Button {
   
        text: "测试数据"
        style: mystyle
    }
}

CheckBox

// CheckBox 示例
Rectangle
{
   
    width: 150
    height: 100
    color: "yellow"
    border.color: "orange"
    border.width: 2

    CheckBox {
   
        x: 0
        y: 0
        text: "JavaScript"
        onCheckedChanged:
        {
   
            console.log("status = ", checked)
        }
    }

    CheckBox {
   
        x: 0
        y: 40
        text: "java"
    }
}


// 互斥单选box
ButtonGroup
{
   
    id: testButtonGroup
    exclusive: true
}
CheckBox {
   
  ButtonGroup.group: testButtonGroup
  x: 0
  y: 0
  text: "JavaScript"
}

CheckBox {
   
  ButtonGroup.group: testButtonGroup
  x: 0
  y: 40
  text: "java"
}

Repeater

Column
{
   
    spacing: 10
    width: 100
    height: 400
    anchors.centerIn: parent

    Repeater
    {
   
        id: testRepeater
        model: 5
        property var titles: ["ID:", "姓名", "班级"]
        property var values: ["02220455", "张三", "6班"]

        Row
        {
   
            spacing: 3
            Text {
   
                text: testRepeater.titles[index]
                color: "black"
                font: {
   
                    bold: true
                    pointSize: 16
                }
            }

            Text {
   
                text: testRepeater.values[index]
                color: "red"
                font: {
   
                    bold: true
                    pointSize: 16
                }
            }
        }
    }
}

GroupBox

GroupBox用于组织和分组其他控件的容器

Item {
   
    width: 300
    height: 200
    anchors.centerIn: parent

    GroupBox
    {
   
        title: "groupbox"
        anchors.centerIn: parent
        width: 250
        height: 180

        CheckBox {
   
            x: 0
            y: 0
            text: "JavaScript"
        }

        CheckBox {
   
            x: 0
            y: 40
            text: "java"
        }
    }
}

RadioButton

Item {
   
    width: 300
    height: 200
    anchors.centerIn: parent

    GroupBox
    {
   
        title: "groupbox"
        anchors.centerIn: parent
        width: 250
        height: 180

        RadioButton {
   
            x: 0
            y: 0
            text: "JavaScript"
        }

        RadioButton {
   
            x: 0
            y: 40
            text: "java"
        }
    }
}

Slider

Rectangle {
   
    width: 100
    height: 500

    Slider {
   
        id: slider
        from: 1
        value: 25
        to: 100
    }

    MouseArea
    {
   
        anchors.fill: parent
        onClicked: () => {
   
             console.log("value = " , slider.value.toFixed(2))
          	// position 范围是0-1
             console.log("position = " , slider.position)
         }
    }
}

Image

// 加载本地图片
Image {
   
    asynchronous: true
    source: "qrc:/03.png"  // qrc中的图片资源
}

// 充满父视图的背景
Image {
   
      anchors.fill: parent
      source: ":/test/333.jpg"  // qrc中的图片资源
  }

// 网络图片
Image {
   
  	id: imageView
    width: 100
    height: 40
    asynchronous: true
    source: "http://www.baidu.com/img/pcdoodle_2a77789e1a67227122be09c5be16fe46.png"
    //fillMode: Image.PreserveAspectCrop
    onStatusChanged:
    {
   
        console.log("imageView statu = ", imageView.status)
    }
}

BusyIndicator

// 加载器
// 图片还在加载的时候显示加载器
BusyIndicator {
   
     running: imageView.status === Image.Loading
     anchors.centerIn: parent
 }

Image {
   
    id: imageView
    width: 100
    height: 40
    asynchronous: true
    source: "http://www.baidu.com/img/pcdoodle_2a77789e1a67227122be09c5be16fe46.png"
    //fillMode: Image.PreserveAspectCrop
    onStatusChanged:
    {
   
        console.log("imageView statu = ", imageView.status)
    }
}

FileDialog

FileDialog {
   
    id: fileDialog
    title: "Please choose a file"
    folder: shortcuts.home
    onAccepted: {
   
        console.log("You chose: " + fileDialog.fileUrls)

    }
    onRejected: {
   
        console.log("Canceled")
    }
}

Button
{
   
    text: "打开"
    onClicked: fileDialog.visible = true
}

ComboBox

ComboBox {
   
  	// 默认选择
    currentIndex: 2
    displayText: "语言: " + currentText
    model: ["java", "javaScript", "C++"]
}

ComboBox {
   
    id: box
    anchors.centerIn: parent
    textRole: "key"
    valueRole: "value"
    model: ListModel
    {
   
        id: modelData
        ListElement {
   
            key: "first"; value: 1
        }
        ListElement {
   
            key: "second"; value: 2
        }
        ListElement {
   
            key: "third"; value: 3
        }
    }
    onActivated: (index) => {
   
       print("onActivated ", index)
       print("currentIndex ", currentIndex)
       print("currentValue ", currentValue)
       print("currentText ", currentText)
   }
}

Button
{
   
    text: "删除"
    anchors.top: box.bottom
    anchors.topMargin: 10
    anchors.horizontalCenter: parent.horizontalCenter
    onClicked:
    {
   
        modelData.remove(box.currentIndex, 1)
    }
}

ListView

Rectangle {
   
        id: topView
        width: 400
        height: 300
        color: "red"

        ScrollView
        {
   
            // 滚动条
            anchors.fill: parent
            ListView
            {
   
                id: listView
                anchors.fill: parent
                model:  ListModel
                {
   
                    id: listData
                    ListElement
                    {
   
                        name: "first"
                        number: "123"
                    }
                    ListElement
                    {
   
                        name: "second"