【qml学习笔记】2常用组件

核心元素

• 元素可以分为视觉元素和非视觉元素。
  • 视觉元素（如Rectangle）具有几何形状，
  • 非视觉元素（Timer）提供一般功能，通常用于控制视觉元素。

item

Item是所有视觉元素的基础元素，因此所有其他视觉元素都从Item继承。它本身并不绘制任何东西，但定义了所有视觉元素的共同属性：

• 几何属性（Geometry）：
  • x、y：用于定义元素展开的左上角位置
  • z：用于定义堆叠顺序。
  • width 、 height：用于表示范围
• 布局处理：
  • anchors：（左、右、上、下、垂直和水平中心）相对于其他元素进行定位。
  • 可选项margins
• 键处理:
  • Key和KeyNavigation属性用于控制键处理focus属性用启用键处理。
• 变换
  • scale和rotate变换以及x、y、z变换的通用transform属性列表，以及transformOrigin。
• 视觉
  • opacity用于控制透明度，
  • visible用于显示/隐藏元素，
  • clip用于限制对元素边界的绘制操作，
  • smooth用于增强渲染质量。
• 状态定义
  • states用于动画化状态更改。包含所有支持的状态列表、当前state属性和transitions列表属性，

Rectangle

Rectangle扩展了Item，为其添加填充颜色。此外，还支持border.color和border.width。要创建圆角矩形，可以使用radius属性。除了填充颜色和边框，矩形还支持自定义渐变。

Rectangle { 
    id: rect3
    x: 212; y: 12 
    width: 76; 
    height: 96 
    gradient: Gradient { 
        GradientStop { position: 0.0; color: "lightsteelblue" } 
        GradientStop { position: 1.0; color: "slategray" } 
    } 
    border.color: "slategray" 
    border.width:10
    border.width:10
} 

Text

要显示文本，可以使用Text元素。它最显著的属性是字符串类型的text属性。元素根据给定的文本和使用的字体（例如font.family、font.pixelSize等）计算其初始宽度和高度。要更改文本的颜色，只需使用color属性。

 Text {
        width: 80; height: 240
        text: 'A very long text'
        color:"#ffffff"
        //elide属性允许将省略符位置设置为文本的左侧、右侧或中间。
        elide: Text.ElideMiddle
        //可以使用horizontalAlignment和verticalAlignment属性对齐文本。
        horizontalAlignment:  Text.AlignHCenter
        verticalAlignment: Text.AlignTop
        //使用style和styleColor属性，允许以轮廓、凸起和凹陷模式渲染文本。
        style: Text.Sunken
        styleColor: '#000000'
        //如果不希望省略符模式的“…”出现，但仍希望看到全文，可以使用wrapMode属性包装文本
        //（仅在显式的设置了宽度时有效）
        //自动换行
        wrapMode: Text.WordWrap
    }

image

image元素能够以各种格式（例如PNG、JPG、GIF、BMP、WEBP）显示图像。有关支持的图像格式的完整列表，请参阅Qt文档。除了提供图像URL的source属性外，它还包含一个控制大小调整行为的fillMode。

 Image {
            x: 200;
            y: 400
            width: 80
            height: 40
            // width: 72
            source: "./image/-true.png"
            fillMode: Image.PreserveAspectFit
            clip: true
        }

• Image.Stretch：默认值。缩放图像以适合项目
• Image.PreserveAspectFit：图像均匀缩放以适应而不裁剪
• Image.PreserveAspectCrop：图像均匀缩放以填充，必要时进行裁剪
• Image.Tile：水平和垂直复制图像I
• Image.TileVertically：图像水平拉伸并垂直平铺
• Image.TileHorizontally：图像被垂直拉伸并水平平铺

MouseArea

MouseArea这是一个矩形的不可见项，可以在其中捕获鼠标事件。

Rectangle {
            id: rect3
            x: 212; y: 12
            width: 76;
            height: 96
            gradient: Gradient {
                GradientStop { position: 0.0; color: "lightsteelblue" }
                GradientStop { position: 1.0; color: "slategray" }
            }
            border.color: "black"
            border.width:5
            radius: 10
            MouseArea {
            id: area
            width: parent.width
            height: parent.height
            onClicked: text1.visible = !text1.visible
        }

anchors

• QML可以用锚来布局项目。锚定的概念是Item的基础，可用于所有可视化QML元素。

  • 文本元素除了top、bottom、left、right、horizontalCenter、verticalCenter锚外，还有baseline锚

  • 每个锚都有一个偏移。对于top、bottom、left、right锚，它们称为边距。对于horizontalCenter、verticalCenter和baseline，它们称为偏移。

    

Rectangle
        {
            width: 200;height: 200;
            color: "green"
            Rectangle
            {
                width: 12;//会被anchors.fill覆盖掉
                color:"blue"
                anchors.fill: parent
                //anchors.left: parent.left
                //anchors.left: parent.right
                anchors.margins: 8
                Text {
                    id: text1
                    text: qsTr("(1)")
                    anchors.centerIn: parent
                }
            }
        }