Qt：Qt Qucik QML类型

淩亂°似流年 2023-01-12 11:47 167阅读 0赞

# QML类型 #

## 渐变Gradient ##

> **功能：**
> 
>  *  定义渐变填充（颜色梯度）
>  *  颜色被指定为一组[GradientStop][]子项，每个子项都定义了渐变上从0.0到1.0的位置以及一种颜色。
>     
>      *  每个[GradientStop][]的位置是通过设置其[position][]属性来定义的；
>      *  其颜色是使用其[color][]属性定义的。
>      *  没有任何渐变停止的渐变将呈现为纯白色填充。
>  *  请注意，该项目不是渐变的视觉表示。要显示渐变，请使用支持渐变使用的可视项（如[Rectangle][]）。
>  *  与使用单色填充或图像相比，计算梯度可能在计算上昂贵。考虑对用户界面中的静态项目使用渐变。
>  *  设置渐变动画的另一种方法是使用预先生成的图像或包含渐变的SVG绘图。
> 
> <table style="width:500px;"> 
>  <tbody> 
>   <tr> 
>    <td>导入</td> 
>    <td>import QtQuick 2.15</td> 
>   </tr> 
>   <tr> 
>    <td>继承自</td> 
>    <td><a href="https://doc.qt.io/qt-5/qml-qtquick-shapes-shapegradient.html" rel="nofollow">ShapeGradient</a></td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> **属性：**
> 
>  *  **[orientation][]** : enumeration
>     
>      *  **Gradient.Vertical**\-垂直渐变（默认）
>      *  **Gradient.Horizontal**\-水平渐变
>      *  此属性在Qt 5.12中引入
>  *  **[stops][]** : list<GradientStop>
>     
>      *  描述渐变的渐变停止点
>      *  默认情况下，此属性包含一个空列表。

## 渐变位置颜色GradientStop  ##

> **功能：**
> 
>  *  在渐变中的某个位置定义颜色
>  *  颜色被指定为一组[GradientStop][]子项，每个子项都定义了渐变上从0.0到1.0的位置以及一种颜色。
>     
>      *  每个[GradientStop][]的位置是通过设置其[position][]属性来定义的；
>      *  其颜色是使用其[color][]属性定义的。
>      *  没有任何渐变停止的渐变将呈现为纯白色填充。
> 
> <table style="width:500px;"> 
>  <tbody> 
>   <tr> 
>    <td>导入</td> 
>    <td>import QtQuick 2.15</td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> **Properties**
> 
>  *  **[color][]** : color，默认颜色是黑色
>  *  **[position][]** : real，默认位置是0.0
> 
> **示例：**
> 
>     import QtQuick 2.12  //类似#include
>     import QtQuick.Window 2.12
>     
>     Window {     //注册到Qt quick的对象
>         visible: true
>         width: 150; height: 150
>         title: qsTr("Hello World")
>     
>         // 渐变以红色开始，在矩形高度的三分之一处融合为黄色，并以绿色结束：
>         Rectangle {
>             width: 80; height: 80
>             gradient: Gradient {
>                 GradientStop { position: 0.0; color: "red" }
>                 GradientStop { position: 0.33; color: "yellow" }
>                 GradientStop { position: 1.0; color: "green" }
>             }
>         }
>     }
> 
> ![20210311164501369.png][]
> 
> \-

## 矩形Rectangle ##

> **功能：**
> 
>  *  绘制带有可选边框的填充矩形
>  *  用于用纯色或渐变填充区域
>  *  也可以用于提供矩形边框
> 
> <table style="width:500px;"> 
>  <tbody> 
>   <tr> 
>    <td>导入</td> 
>    <td>import QtQuick 2.15</td> 
>   </tr> 
>   <tr> 
>    <td>继承自</td> 
>    <td><a href="https://doc.qt.io/qt-5/qml-qtquick-item.html" rel="nofollow">Item</a></td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> **属性：**
> 
>  *  **[antialiasing][]** : bool
>     
>      *  用于确定Rectangle是否应使用抗锯齿。
>      *  对于具有半径的矩形，默认值为true，否则为false。
>  *  **[border][]**
>     
>      *  用于绘制矩形边框的宽度和颜色。宽度1会产生一条细线。对于没有线条，请使用宽度0或透明颜色。
>      *  **[border.color][]** : color
>      *  **[border.width][]** : int
>      *  如果使用锚点，则矩形边框的宽度不会影响矩形本身的几何形状或相对于其他项目的位置。
>  *  **[color][color 1]** : color
>     
>      *  此属性保存用于填充矩形的颜色。
>      *  默认颜色是白色。
>      *  如果同时指定了颜色和渐变，则使用渐变。
>  *  **[gradient][]** : any
>     
>      *  此属性保存用于填充矩形的渐变。
> 
>  *  **[radius][]** : real
>     
>      *  保存用于绘制圆角矩形的角半径。
>      *  如果radius不为零，则矩形将被绘制为圆角矩形，否则将被绘制为普通矩形
>      *  所有四个角都使用相同的半径。当前无法为不同的角指定不同的半径。
> 
> **外貌：**
> 
>  *  每个Rectangle项目都使用纯色或渐变来绘制。
>  *  可以通过设置[border.color][]和[border.width][]属性，为具有自己的颜色和厚度的矩形添加可选边框。
>  *  将颜色设置为“透明”以绘制没有填充颜色的边框。
>  *  可以使用[radius][]属性创建圆角矩形。
> 
> 1.  由于这会将弯曲的边缘引入矩形的角，因此可能应设置[Item :: antialiasing][Item _ antialiasing]属性以改善其外观。
> 2.  使用[Item :: antialiasing][Item _ antialiasing]属性可改善圆角矩形的外观，但会降低渲染性能。您应该考虑为运动中的矩形取消设置此属性，并且仅在其静止时设置它。
> 
> **示例：**
> 
>     import QtQuick 2.12  //类似#include
>     import QtQuick.Window 2.12
>     
>     Window {     //注册到Qt quick的对象
>         visible: true
>         width: 640; height: 480
>         title: qsTr("Hello World")
>     
>     
>         // ------设置边框------
>         Rectangle {
>             width: 80 ; height: 80
>             color: "red"
>             border.color: "black"
>             border.width: 5
>             radius: 10
>         }
>     
>         Rectangle {
>             x:100; y: 0; width: 80 ; height: 80
>             color: "#272822"
>             border { width: 3; color: "red" }  //
>             radius: 10
>         }
>     
>     
>         // ----显示使用十六进制指定颜色并使用颜色表示法命名的矩形--------
>         Rectangle {
>             y: 100;color: "#00B000"
>             width: 80; height: 80
>         }
>     
>         Rectangle {
>             color: "steelblue"
>             x:100; y: 100; width: 80; height: 80
>         }
>     
>         // ------------显示渐变矩形------------
>         // 水平渐变
>         Rectangle {
>             x:0; y: 200; width: 80; height: 80
>             color: "lightsteelblue"
>         }
>     
>         // 通过将旋转添加到矩形可以形成其他渐变
>         Rectangle {
>             x:100; y: 200; width: 80; height: 80
>             gradient: Gradient { // This sets a vertical gradient fill
>                        GradientStop { position: 0.0; color: "aqua" }
>                        GradientStop { position: 1.0; color: "teal" }
>                    }
>         }
>     
>         // 通过将旋转添加到矩形可以形成其他渐变
>         Rectangle {
>             x:200;y: 200; width: 80; height: 80
>             rotation: 90
>             gradient: Gradient {
>                 GradientStop { position: 0.0; color: "lightsteelblue" }
>                 GradientStop { position: 1.0; color: "blue" }
>             }
>         }
>     
>         // 接受QGradient :: Preset中的渐变预设
>         Rectangle {
>             x:300;y: 200; width: 80; height: 80
>             gradient: Gradient.NightFade
>         }
>         Rectangle {
>             x:400;y: 200; width: 80; height: 80
>             gradient: "NightFade"
>         }
>     }
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70][]
> 
> **官方文档**：[https://doc.qt.io/qt-5/qml-qtquick-rectangle.html\#antialiasing-prop][antialiasing]

[GradientStop]: https://doc.qt.io/qt-5/qml-qtquick-gradientstop.html
[position]: https://doc.qt.io/qt-5/qml-qtquick-gradientstop.html#position-prop
[color]: https://doc.qt.io/qt-5/qml-qtquick-gradientstop.html#color-prop
[Rectangle]: https://doc.qt.io/qt-5/qml-qtquick-rectangle.html
[orientation]: https://doc.qt.io/qt-5/qml-qtquick-gradient.html#orientation-prop
[stops]: https://doc.qt.io/qt-5/qml-qtquick-gradient.html#stops-prop
[20210311164501369.png]: /images/20221119/9671e7812b444fc48141a94589400213.png
[antialiasing]: https://doc.qt.io/qt-5/qml-qtquick-rectangle.html#antialiasing-prop
[border]: https://doc.qt.io/qt-5/qml-qtquick-rectangle.html#border-prop
[border.color]: https://doc.qt.io/qt-5/qml-qtquick-rectangle.html#border.color-prop
[border.width]: https://doc.qt.io/qt-5/qml-qtquick-rectangle.html#border.width-prop
[color 1]: https://doc.qt.io/qt-5/qml-qtquick-rectangle.html#color-prop
[gradient]: https://doc.qt.io/qt-5/qml-qtquick-rectangle.html#gradient-prop
[radius]: https://doc.qt.io/qt-5/qml-qtquick-rectangle.html#radius-prop
[Item _ antialiasing]: https://doc.qt.io/qt-5/qml-qtquick-item.html#antialiasing-prop
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: /images/20221119/6872a4fd7efb4b0ba34e72de7efc2f5a.png