devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

QML学习笔记

作者：Cpp五条 | 2024-02-20 00:02:40

赞

踩

qml中的alignright

QML语法初见

锚定

  • left 左
  • right 右
  • top 顶部
  • bottom 底部
  • centerIn 中央
  • fill 填充满
  • verticalCenter 垂直中央
  • horizontalCenter 水平中央
anchors.left: parent //放在父对象左边

rotation 旋转(瞬间旋转)

onClicked: Wheel.rotation += 90 //点击时: Wheel对象旋转90度

动画(让旋转平滑进行)

  1. Image{
  2.     id: root
  3.     Image {
  4.         id: wheel
  5.         Behavior on rotation {  //每次旋转时的行为
  6.             NumberAnimation {   //动画
  7.                 duration: 250   //动画时间: 250ms
  8.             }
  9.         }
  10.     }
  11. }

Qt构建模块(Qt building Blocks)

核心基础模块

模块描述
Qt Core核心的非图形类, 供其他模块使用
Qt GUI图形用户界面(GUI)组件的基类, 包括OpenGL
Qt Multimedia音频, 视频, 电台, 摄像头的功能类
Qt Network简化方便的网络编程类
Qt QMLQML类与JavaScript语言的支持
Qt Quick可高度动态创建的自定义应用程序用户界面框架
Qt SQL集成SQL数据库类
Qt TestQt应用程序与库的单元测试类
Qt WebKit集成WebKit2的基础实现并提供了新的QML应用程序接口
Qt WebKit WidgetsWidgets来自Qt4中集成WebKit1的窗口基础类
Qt Widgets扩展Qt GUI模块的C++窗口类
  • 组织架构如下图:
graph TD; QtNetwork-->QtCore; QtQuick-->QtQml; QtQml-->QtCore; QtSql-->QtCore; QtMultimedia-->QtGui; QtGui-->QtCore; linkStyle 0 stroke:#aaa,stroke-width:2px; linkStyle 1 stroke:#aaa,stroke-width:2px; linkStyle 2 stroke:#aaa,stroke-width:2px; linkStyle 3 stroke:#aaa,stroke-width:2px; linkStyle 4 stroke:#aaa,stroke-width:2px; linkStyle 5 stroke:#aaa,stroke-width:2px; style QtQuick fill:#f9f,stroke:#000,stroke-width:1px style QtQml fill:#f9f,stroke:#000,stroke-width:1px style QtNetwork fill:#f9f,stroke:#000,stroke-width:1px style QtSql fill:#f9f,stroke:#000,stroke-width:1px style QtGui fill:#f9f,stroke:#000,stroke-width:1px style QtCore fill:#f9f,stroke:#000,stroke-width:1px style QtMultimedia fill:#f9f,stroke:#000,stroke-width:1px
  • Qt其他一些附加模块, 根据需要选择性了解, 列举如下:
    • Qt 3D 提供3D编程接口
    • Qt Bluetooth 多平台蓝牙接口
    • Qt Contacts 访问联系人数据的接口
    • Qt Location 提供定位, 地图, 导航, 位置搜索等接口
    • Qt Organizer 提供组织事件(任务清单, 事件等)接口
    • Qt Publish and SubScribe Qt发布与订阅
    • Qt Service Framework 允许应用程序读取, 操纵和订阅来改变通知信息
    • Qt System Info 发布系统相关的信息和功能
    • Qt Versit 支持电子名片和日历数据格式
    • Qt Wayland Linux Qt合成器应用程序接口(server), 和Wayland平台插件(clients)
    • Qt Feedback 反馈
    • Qt JSON DB 对于Qt的一个不使用SQL对象存储

创建Qt工程

新建Qt Quick项目

默认有如下几种模板
  • Swipe
    • 多个页面左右切换的框架, 下方标签式按钮可点击切换
  • Scroll
    • 下滑式item框架, 提供多个item下拉, 右侧有滚动条
  • Stack
    • 压栈式框架, 主页提供菜单, 可进入不同子页面, 子页面返回时, 返回到主页面.
  • Empty
    • 空项目, 只提供一个Helloworld窗口
第一个HelloWorld程序
  • 这里我们选择上述框架中的Empty创建第一个HelloWorld界面程序, 项目名字起名为QML_helloworld吧
    • 这个最简单的QML项目, 项目目录如下:
    1. QML_helloworld
    2.     └─QML_helloworld.pro    //项目文件
    3.  └─Sources
    4.     └─main.cpp              //cpp文件
    5.  └─Resources
    6.     └─qml.qrc               //qrc文件
    7.         └─/                 
    8.            └─main.qml      //qml文件
  • 根据代码, 我们只看到一个cpp文件里, 加载了qml执行, 显示出了一个helloworld窗口, 怎么让qml(界面)和C++代码(数据)联动起来, 还是个未知的大问号.
  • 先熟悉下QML语法, 创建一个矩形, 在里面写上文本 "Hello, World", 给他加个退出事件.
  1. import QtQuick 2.9
  2. import QtQuick.Window 2.2
  3.  
  4. Window {
  5.     visible: true
  6.     width: 640
  7.     height: 480
  8.     title: qsTr("Hello World")
  9.     Rectangle {
  10.         width: 360
  11.         height: 360
  12.         color: '#EE00EE'
  13.         Text {
  14.             id: hello
  15.             anchors.centerIn: parent
  16.             text: qsTr("Hello, World")
  17.         }
  18.                 MouseArea {
  19.                     anchors.fill: parent
  20.                     onClicked: {
  21.                         Qt.quit();
  22.                     }
  23.                 }
  24.     }
  25. }

Qt Quick应用程序优势

  • 现代的软件开发中有一个问题, 就是用户常常想改变界面. 或许一个项目换一个领导改一次界面, 这是很常见的, 但后端的改变速度就慢的多了. 传统技术中, 前后端保持相同的步调, 在开发中, 用户想要改变界面常常会引发冲突和矛盾. Qt Quick提供了一个类似HTML的声明式语言作为你的前端, 在后端, 你仍可以使用C++代码, 这样允许两端分离开发.

调试(Debugging)

  • QML的调试和Qt程序一样, 在Qt Creator中进行, 介绍一些常用的快捷键
  1. Ctrl+B - 构建项目
  2. Ctrl+R - 运⾏项目
  3. Ctrl+Tab - 切换已打开的⽂档
  4. Ctrl+k - 打开定位器
  5. Esc - 返回
  6. F2 - 查找对应的符号解释。
  7. F4 - 在头⽂件与源⽂件之间切换（只对c++代码有效）

QML入门

QML语法(QML Syntax)

import
  • import声明导入了一个指定的模板版本, 如导入QtQuick 2.9来作为初始元素的引用.
import QtQuick 2.9
注释
  • 与C++及JavaScript相同, 使用//或/**/注释
元素
  • 每个QML文件都需要一个根元素(通常用root命名, 以方便子元素访问)
  • 一个元素的内容部分, 使用进行包含
  • 元素的属性, 按照name: value的格式来复制, name是属性名, value是值.
  • 任何在QML文档中的元素都可以使用它们的id进行访问
  • 元素可以嵌套, 一个父元素可以嵌套多个和多层子元素, 子元素可以使用parent关键字来访问它们的父元素
预览
  • 可以用以下命令预览qml效果, $QTDIR替换为你的Qt安装路径
$ $QTDIR/bin/qmlscene exm.qml
属性的特点
  • id是一个特殊的属性值, 它在一个QML文件中被用来引用元素, 一个id在一个QML中是唯一的, 并且不能被修改为其他值, 也无法被查询, 它的行为类似C++中的指针.
  • 一个属性能够设置一个值, 这个值依赖于它的类型. 如果没有对一个属性赋值, 那么它将会被初始化为默认值, 具体可查阅特定元素的文档.
  • 属性绑定
    • 一个属性能够依赖一个或多个其它属性, 这种操作被称为属性绑定. 当它依赖的属性改变时, 它的值也对应更新.
  • 添加自己定义的属性时, 需要使用property修饰符, 然后跟上类型, 名字和可选择的初始化值(property: ). 如果没有初始值, 将会给定一个系统初始值为初始值. 如果属性名与已定义的默认属性名不重复, 使用default关键字你可以将一个属性定义为默认属性.
  • 另一个声明属性的方法是使用alias关键字(property alias: ). 该关键字允许我们转发一个属性或者转发一个属性对象本身到另一个作用域(即属性别名). 属性别名不需要类型, 它使用引用的属性类型或者对象类型.
  • 按组分配的属性
    • 如font的属性是按组分配的
    1. font.family: "Ubuntu"
    2. font.pixelSize: 24
    • 按组分配的属性, 还可以写成如下格式:
    font{family: "Ubuntu"; pixelSize: 24}
  • 有些属性是元素自身的附加属性, 如键盘输入, 编码方式.
信号
  • 对于每个元素, 你都可以提供一个信号操作, 这个操作在属性改变时被调用
  • on...Changed 属性值改变型号 
    onHeightChanged: console.log('height:', height) //当height改变时, 在控制台输出height的值
  • Keys.onSpacePressed 按键space信号
  • Keys.onEscapePressed 按键esc信号
id
  • 一个元素的id应该只在当前文档中被引用.
  • id的作用域
    • QML提供了动态作用域的机制, 后加载的文档会覆盖之前加载文档的元素id号, 这时你可以引用已加载但还未被覆盖的元素id, 这点类似于创建全局变量, 但这样的代码阅读性较差. 建议避免使用这种机制.
    • 如果你像向文档外提供元素的调用, 你可以在根元素上使用属性导出的方式来提供.

JavaScript脚本

  1. Text {
  2.         id: label
  3.         x: 24; y: 24
  4.                 width: 360
  5.                 height: 360
  6.         color: '#aaaaaa'
  7.         property int spacePresses: 0
  8.         text: "Space pressed: " + spacePresses + " times"       //属性绑定
  9.         onTextChanged: console.log("text chaneged to: ", text)
  10.         focus: true
  11.         Keys.onSpacePressed:  {
  12.             increment()
  13.         }
  14.         Keys.onEscapePressed:  {
  15.             label.text = ''     //按esc时, 对text进行了赋值操作, 该操作销毁了上面的绑定了.
  16.         }
  17.         function increment() {
  18.             spacePresses = spacePresses + 1     //赋值操作
  19.         }
  20.     }
  • 这里的function是一个JavaScript函数, 注意它的等号与属性的绑定不同, 这里的=只是赋值操作, 只当次调用有效. 不同于属性绑定的=是绑定于整个生命周期的.

基本元素

基本元素简介

  • 分类

    • 可视化元素
      • 有几何形状且可以在屏幕上显示
    • 非可视化元素
      • 如计时器Timer, 提供了常用的功能, 通常用于操作可视化元素

  • 常见的可视化元素

    • Item(基础元对象)
    • Rectangle(矩形框)
    • Text(文本)
    • Image(图像)
    • MouseArea(鼠标区域)
Item
  • (基础元素对象)是所有可视化元素的基础对象, 所有其它的可视化元素都继承自Item, Item本身不会有任何绘制操作, 但定义了所有可视化元素共有的属性:
GroupProperties
Geometry(几何属性)x, y(坐标) 定义了元素左上角的位置, width, height(长和宽), 定义元素的显示范围, z(堆叠次序)定义元素之间的重叠顺序.
Layouthandinganchors(锚定), 包括左(left), 右(right), 上(top), 下(bottom), 水平与垂直居中(vertical center, horizontal center), 与margins(间距)一起定义了元素与其它元素之间的位置关系.
Key handlikng(按键操作)附加属性key(按键) 和KeyNavigation(按键定位) 属性来控制按键操作, 处理输入焦点(focus)可用操作.
Transformation缩放(scale)和旋转(rotate)转换, 通用的x, y, z属性列表转换(transform), 旋转基点设置(transformOrigin).
Visual(可视化)不透明度(opacity), visible(是否可见), clip(裁剪)用来控制元素的边界, smooth(平滑)用来提高渲染质量.
State definitionstates(状态列表属性) 提供了元素当前所支持的状态列表, 当前属性的改变也可以使用transitions(转变) 属性列表来定义状态转变动画.
  • Item虽然不绘制, 但它常常作为其他元素的容器来使用, 类似于HTML中的div
  • 后面用到时会详细介绍这些.
Rectangle Element (矩形元素)
  • 对Item的一个扩展, 增加了颜色来填充它, 支持边界的定义, 如:
    • border.color(边界颜色)
    • border.width(边界宽度)
    • radius(圆角半径)
  1.     Rectangle {
  2.         id: rect1
  3.         x: 10; y: 10
  4.         width: 75; height: 95
  5.         color: "lightsteelblue"
  6.     }
  7.     Rectangle {
  8.         id: rect2
  9.         x: 110; y: 12
  10.         width: 75; height: 95
  11.         border.color: "lightsteelblue"
  12.         border.width: 5
  13.         radius: 8
  14.     }

  • 颜色的命名是来自SVGA颜色的名称(https://www.w3.org/TR/css-color-3/#svg-color), 你也可以用RGB字符串('#FF00FF'), 或者一个颜色的名字('white')来指定颜色.

  • 渐变色

    • 边框和填充色, 也支持渐变色设置
    1. Rectangle {
    2.         id: rect1
    3.         x: 10; y: 10
    4.         width: 175; height: 95
    5.         gradient: Gradient {
    6.             GradientStop {
    7.                 position: 0.0; color: "lightsteelblue"
    8.             }
    9.             GradientStop {
    10.                 position: 0.5; color: "slategray"
    11.             }
    12.             GradientStop {
    13.                 position: 1.0; color: "lightsteelblue"
    14.             }
    15.         }
    16.         border.color: "slategray"
    17.     }
    • 上述代码实现了一个上下偏蓝, 中间偏灰的渐变.
    • position的值表示y轴上的位置, 0表示顶, 1表示底.
    • GradientStop(倾斜点)的颜色标记了颜色渐变目标色

  • 一个矩形框如果没有width/height将不可见, 如果有多个相互关联width/height的矩形框, 就要注意他们的组合逻辑, 防止组合逻辑的错误导致矩形框不可见.

  • 不建议使用此函数创建梯形, 因为在对梯形操作时会导致一些问题. 最好使用设计好的梯形图形来完成绘制.

Text Element (文本元素)
  • text属性和font属性来计算该元素的高度与宽度
  • font属性组中可以设置字体和大小
    • font.family 字体
    • font.pixelSize 大小
  • color属性改变文本颜色
  1.     Text {
  2.         text: "你好, 世界!"
  3.         font.family: "STXinwei"
  4.         color: "#333333"
  5.         font.pixelSize: 28
  6.     }

  • font.family的选择, 可以使用系统已有的字体, 例如这里选择了华文新魏("STXinwei")

  • 也可以使用FontLoader来装载自己的字体

  • horizontalAlignment 设置水平对齐方式

    • AlignLeft 靠左
    • AlignRight 靠右
    • AlignHCenter 居中
    • AlignJustify 在可用空间内对齐

  • verticalAlignment 设置垂直对齐方式

    • AlignTop
    • AlignBottom
    • AlignVCenter
    • AlignBaseline 基线对齐
  1.     Text {
  2.         x: 50; y: 50
  3.         width: 150; height: 120
  4.         text: 'A very long text'
  5.         //elide: Text.ElideMiddle
  6.         wrapMode: Text.WordWrap
  7.         style: Text.Sunken
  8.         styleColor: '#FF4444'
  9.         verticalAlignment: Text.AlignTop
  10.         font.pixelSize: 48
  11.     }

  • 换行与省略

    • elide属性 设置对于过长的文本显示省略号
      • ElideMiddle 文本超出时, 中间部分显示省略号
      • ElideLeft 文本超出时, 文本开始部分显示省略号
      • ElideRight 超出时, 结束部分显示省略号
      • ElideNone 不显示省略号
    • wrapMode属性 设置换行, 只有设置了宽度后, 该属性才生效

  • 字体绘制风格设置

    • style 字体浮雕效果或者凹陷效果等
      • Sunken
      • Raised
      • Plain
    • styleColor

  • 背景问题

    • text元素是无背景的, 它不会渲染任何背景修饰. 除了显示的文本, text元素背景是透明的. 为text添加背景需要你自己去处理.

  • 初始宽度问题

    • 文本元素的初始宽度与高度是依赖于文本字符串和设置的字体的, 一个没有设置文本和宽度的文本元素将不可见, 默认初始宽度是0

  • 对齐问题

    • 文本元素内部的对齐使用horizontalAlignment和verticalAlignment属性来完成, 文本元素在父对象里的对齐方式, 通常需要你操作元素的几何形状或者使用anchors(锚定)来完成
Image Element (图像元素)
  1.     Image {
  2.         x: 12; y: 12
  3. //        width: 48
  4. //        height: 118
  5.         source: "image/rocket.png"
  6.     }
  7.     Image {
  8.         x: 112; y:12
  9.         width: 48
  10.         height: 118/2
  11.         source: "image/rocket.png"
  12.         fillMode: Image.PreserveAspectCrop
  13.         clip: true
  14.     }
  • Image元素能够显示不同格式的图像(png, jpg, gif, bmp等)
  • source属性 提供图像文件的链接信息
    • source后面的URL可以是本地路径, 也可以是网络路径的图.
  • fillMode(填充模式) 属性能够控制元素对象的大小调整行为
    • Stretch 图像缩放以适合
    • PreserveAspectFit 图像均匀缩放以适合而不进行裁剪
    • PreserveAspectCrop 图像均匀缩放以填充, 必要时进行裁剪
    • Tile 图像水平和垂直复制
    • TileVertical 图像水平拉伸并垂直平铺
    • TileHorizontal 垂直拉伸并水平平铺
    • Pad 显示图片且不做任何转换
  • clip属性 裁剪
    • 默认情况下裁剪是禁用的(clip: false), 需要打开裁剪(clip: true)来约束绘制行为, 该属性对任何可视化元素都是有效的.
  • 建议
    • 使用QQmlImageProvider你可以通过C++代码来创建自己的图像提供器, 这允许你动态创建图像, 并使用线程加载.
MouseArea Element(鼠标区域元素)
  1.     Rectangle {
  2.         id: rect1
  3.         x: 10; y: 10
  4.         width: 75; height: 95
  5.         color: "lightsteelblue"
  6.         MouseArea {
  7.             id: area
  8.             width: parent.width
  9.             height: parent.height
  10.             onClicked: rect2.visible = !rect2.visible
  11.         }
  12.     }
  13.  
  14.     Rectangle {
  15.         id: rect2
  16.         x: 110; y: 10
  17.         width: 75; height: 95
  18.         visible: false
  19.         border.color: "lightsteelblue"
  20.         border.width: 4
  21.         radius: 8
  22.     }

  • 这是一个矩形的非可视化元素, 你可以通过它来捕捉鼠标事件, 当用户与可视化窗口交互时, 该元素被用来与可视化元素对象一起完成命令.

  • 特性: 输入处理和可视化显示分开, 这样你的交互区域可以很灵活控制.

Components (组件)

  • 一个组件是一个可以复用的元素, QML提供几种不同的方法来创建组件.

  • 文件组件

    • 一个文件就是一个基础组件. 即: 一个以文件为基础的组件在文件中创建了一个QML元素, 并且将文件以元素类型来命名(例如Button.qml).

  • 组件中只有根目录的属性, 对外是开放的, 如果要访问子元素的属性, 需要在根目录给它取一个别名

  • 示例组件

  1. //Button.xml
  2. import QtQuick 2.0
  3.  
  4. Item {
  5.     id: root
  6.     property  alias text: label.text
  7.     signal clicked
  8.  
  9.     Rectangle {
  10.         id: button
  11.         x: 10; y: 10
  12.         width: 110; height: 25
  13.         color:  "lightsteelblue"
  14.         border.color: "slategrey"
  15.         Text {
  16.             id: label
  17.             anchors.centerIn: parent
  18.             text: "Start"
  19.         }
  20.         MouseArea {
  21.             anchors.fill: parent
  22.             onClicked: {
  23.                 status.text = "Button clicked!"
  24.                 root.clicked()
  25.             }
  26.  
  27.         }
  28.     }
  29.     Text {
  30.         id: status
  31.         x: 10; y:75
  32.         width: 110; height: 25
  33.         text: "Waitting ..."
  34.         horizontalAlignment: Text.AlignHCenter
  35.     }
  36. }
  • 调用示例组件
    • 调用时修改了text的值, 运行结果按钮上不是显示Start而是显示Click, 同时组件的onClicked信号会传给调用对象, 触发对应的函数, 改变了其status元素的文本为"已点击"
  1. //mian.xml
  2.     Text {
  3.         id: status
  4.         x: 120; y:75
  5.         width: 110; height: 25
  6.         text: "Waitting ..."
  7.         horizontalAlignment: Text.AlignHCenter
  8.     }
  9.     Button {
  10.         id: button
  11.         x:12; y:12
  12.         text: "Click!"
  13.         onClicked: {
  14.             status.text = "已点击"
  15.         }
  16.     }
  • 组件的root常常使用item元素, 这样组件的子元素能够更好的封装.
Simple Transformations (元素的简单转换)
  • 转换操作可以改变对象的几何状态, 通常有平移, 旋转, 缩放等.
  • 以下示例, 用来演示对一个小火箭的三种操作
  1. //给小火箭做一个基础组件
  2. //ClickableImage.qml
  3. import QtQuick 2.0
  4.  
  5. Image {
  6.     id: root
  7.     signal clicked
  8.     MouseArea {
  9.         anchors.fill: parent
  10.         onClicked: root.clicked()
  11.     }
  12. }
  1. //调用小火箭组件, 并设置一些互动
  2. Image {
  3.         id: bg
  4.         source: "image/blue.png"
  5.     }
  6.     MouseArea {
  7.         id: backgroundClicker
  8.         anchors.fill: parent
  9.         onClicked:  {   //点击背景时, 将三张图片参数还原
  10.             rocket1.x = 20
  11.             rocket2.rotation = 0
  12.             rocket3.rotation = 0
  13.             rocket3.scale = 1.0
  14.         }
  15.     }
  16.  
  17.     ClickableImage {
  18.         id: rocket1
  19.         x: 20; y: 100
  20.         source: "image/rocket.png"
  21.         onClicked:  {
  22.             x+=5    //向右平移
  23.         }
  24.     }
  25.  
  26.     ClickableImage {
  27.         id: rocket2
  28.         x: 140; y: 100
  29.         source: "image/rocket.png"
  30.         smooth: true        //设置抗锯齿, 提高显示质量
  31.         onClicked: {
  32.             rotation += 5   //旋转5度
  33.         }
  34.     }
  35.  
  36.     ClickableImage {
  37.         id: rocket3
  38.         x: 240; y: 100
  39.         source: "image/rocket.png"
  40.         smooth: true
  41.         onClicked: {
  42.             rotation += 5       //旋转5度
  43.             scale -= 0.05       //缩小0.05
  44.         }
  45.     }
  • 堆叠顺序(z-order)
    • 注意堆叠顺序, 是后面的元素在前面的元素上方的. 当他们重叠时, 后面的元素会遮挡前面的元素. 如果需要调整堆叠次序时, 使用元素对象z-property来控制.

Positioning Element(定位元素)

  • 有一些QML元素被用于放置元素对象, 它们被称为定位器, QtQuick模块提供了Row, Column, Grid, Flow用来作为定位器. 以下用颜色组件对象来进行示例.
  • 先写几个颜色组件(Red, Blue, Green, Lighter, Darker各写一个, 这里仅以Red示例)
  1. //RedSquare.qml
  2. import QtQuick 2.0
  3.  
  4. Rectangle {
  5.     width: 48
  6.     height:  48
  7.     color: "#ee0000"
  8.     border.color: Qt.lighter(color)
  9. }
  • Column (行布局)
  1. //Column
  2. DarkerSquare {
  3.         id: root
  4.         width: 150
  5.         height: 300
  6.         anchors.centerIn: parent
  7.  
  8.         Column {
  9.             id: column
  10.             anchors.centerIn: parent
  11.             spacing: 10  //行距
  12.             RedSquare {
  13.  
  14.             }
  15.             GreenSquare {
  16.                 width: 100
  17.             }
  18.             BlueSquare {
  19.  
  20.             }
  21.         }
  22.     }
  • Row (列布局)
  1.     //Row
  2.     DarkerSquare {
  3.         id: root
  4.         width: 300
  5.         height: 240
  6.         anchors.centerIn: parent
  7.  
  8.         Row {
  9.             id: row
  10.             anchors.centerIn: parent
  11.             spacing: 15  //列宽
  12.             RedSquare {
  13.             }
  14.             GreenSquare {
  15.             }
  16.             BlueSquare {
  17.             }
  18.             LighterSquare {
  19.  
  20.             }
  21.         }
  22.     }
  • Grid (网格布局)
  1.         //Grid
  2.         DarkerSquare {
  3.             id: root
  4.             width: 300
  5.             height: 240
  6.             anchors.centerIn: parent
  7.  
  8.             Grid {
  9.                 id: grid
  10.                 rows: 2
  11.                 columns: 2
  12.                 anchors.centerIn: parent
  13.                 spacing: 15  
  14.                 RedSquare {
  15.                 }
  16.                 GreenSquare {
  17.                 }
  18.                 BlueSquare {
  19.                 }
  20.                 LighterSquare {
  21.  
  22.                 }
  23.             }
  24.         }
  • Flow (流式布局)
    • Flow类似Grid布局, 但更智能, 可以根据对象的长宽做智能化调整.
  1. //Flow
  2.         DarkerSquare {
  3.             id: root
  4.             width: 300
  5.             height: 240
  6.             anchors.centerIn: parent
  7.  
  8.             Flow {
  9.                 id: flow
  10.                 //anchors.centerIn: parent
  11.                 anchors.fill: parent
  12.                 anchors.margins: 20
  13.                 spacing: 15
  14.                 RedSquare {
  15.                     width: 20
  16.                 }
  17.                 GreenSquare {
  18.                     height: 60
  19.                 }
  20.                 BlueSquare {
  21.                     width: 75
  22.                 }
  23.                 LighterSquare {
  24.                     height: 90
  25.                 }
  26.             }
  27.         }
  • Repeater (重复元素)
    • Repeater通常与定位器一起使用. 它的工作方式就像for循环和迭代器一样
知识点
  • int型与string用加号连接时, 会自动转换为string
  • 焦点控件变色
  1. // focus is neeed to receive key events
  2. focus: true
  3. // change color based on focus value
  4. color: focus?"red":"black"

转载于:https://www.cnblogs.com/nonsupport/p/11535025.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/117413
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号