vate和elementUI对比

转载

mob64ca13ff28f1 2024-09-10 22:40:22

文章标签 vate和elementUI对比 qt QML 元素介绍 Image 文章分类 机器学习人工智能

基本元素（Basic Elements）

元素可以被分为可视化元素与非可视化元素。一个可视化元素（例如矩形框Rectangle）有着几何形状并且可以在屏幕上显示。一个非可视化元素（例如计时器Timer）提供了常用的功能，通常用于操作可视化元素。

现在我们将专注于几个基础的可视化元素，例如Item（基础元素对象），Rectangle（矩形框），Text（文本）， Image（图像）和MouseArea（鼠标区域）。

基础元素对象(Item Element)

Item（基础元素对象）是所有可视化元素的基础对象，所有其它的可视化元素都继承自Item。它自身不会有任何绘制操作，但是定义了所有可视化元素共有的属性：

Group（分组）	Properties（属性）
Geometry （几何属性）	x,y（坐标）定义了元素左上角的位置， width，height（长和宽）定义元素的显示范围， z（堆叠次序）定义元素之间的重叠顺序。
Layout handling（布局操作）	anchors（锚定）,包括左（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 definition （状态定义）	states（状态列表属性）提供了元素当前所支持的状态列表，当前属性的改变也可以使用transitions（转变）属性列表来定义状态转变动画。

矩形框元素（Rectangle Element）

Rectangle（矩形框）是基本元素对象的一个扩展，增加了一个颜色来填充它。它还支持边界的定义，使用border.color（边界颜色）， border.width（边界宽度）来自定义边界。你可以使用radius（半径）属性来创建一个圆角矩形。

Rectangle {
	id: rect1
	x: 12; y: 12
	width: 76; height: 96
	color: "lightsteelblue"
} 

Rectangle {
	id: rect2
	x: 112; y: 12
	width: 76; height: 96
	border.color: "lightsteelblue"
	border.width: 4  // 线宽
	radius: 8		 // 圆角
}

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

效果图：

vate和elementUI对比_QML

图像元素（ Image Element）

一个图像元素（ Image Element）能够显示不同格式的图像（例如PNG,JPG,GIF,BMP）。想要知道更加详细的图像格式支持信息，可以查看Qt的相关文档。 source属性（ source property）提供了图像文件的链接信息， fillMode（文件模式）属性能够控制元素对象的大小调整行为。

Image {
        x: 50; y: 60
        source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
    }

    Image {
        x: 112; y: 12
        width: 48
        height: 118/2
        source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
//        fillMode: Image.PreserveAspectCrop
        clip: true
    }

    Image {
        x: 50; y: 200
        width: 48
        height: 118/2
        source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
        fillMode: Image.PreserveAspectCrop
        clip: false
    }

效果图（红色白框手动框选，为了凸显）：

vate和elementUI对比_vate和elementUI对比_02