QML 笔记_1

最新推荐文章于 2024-07-18 15:03:25 发布

关机睡觉

最新推荐文章于 2024-07-18 15:03:25 发布

阅读量1k

点赞数 24

文章标签：笔记

本文链接：https://blog.csdn.net/weixin_44874879/article/details/136371917

版权

QML 笔记

QML 属性

基本类型
int,real,string,bool,color,list,font

公共属性
1、标识符：id 唯一的,首字符字母小写或下划线
2、位置：x / y,大小：width / height
3、层级顺序：z 默认为0,值越大,越上层
4、是否显示：visible 是否可见; 缩放：scale
5、基点描述：transfromOrigin ; 旋转：rotaton

描述一个基点，然后元素可以基于此基点来缩放（scale属性）和旋转（rotation属性），默认基点是Item.Center，即元素的中心点。系统预定义了9个基点

6、透明度：opacity 取值范围0~1

7、聚焦：focus 聚焦状态：activeFocus (只读)

如果两个元素同时focues被设置为true，小的被聚焦

8、元素状态：state 所有属性：states
9、父元素：parent 子元素、资源：children / resources
10、锚定属性：anchors

anchors.top : AnchorLine	位于Item对象上线上
anchors.bottom : AnchorLine	位于Item对象下线上
anchors.left : AnchorLine	位于Item对象左线上
anchors.right : AnchorLine	位于Item对象右线上
anchors.horizontalCenter : AnchorLine	位于Item对象水平中心线上
anchors.verticalCenter : AnchorLine	位于Item对象垂直中心线上
anchors.baseline : AnchorLine	位于Item对象基线上
anchors.fill : Item	填充满Item对象
anchors.centerIn : Item	位于Item对象的中心
anchors.margins : x	位于外边距为x距离处
anchors.topMargin : x	位于上外边距为x距离处
anchors.bottomMargin : x	位于下外边距为x距离处
anchors.leftMargin : x	位于左外边距为x距离处
anchors.rightMargin : x	位于右外边距为x距离处
anchors.horizontalCenterOffset : x	位于水平中心偏移x距离处
anchors.verticalCenterOffset : x	位于垂直中心偏移x距离处
anchors.baselineOffset : x	位于基线偏移x距离处

11、显示或隐藏：clip

程序结构

Window和Item都可以作为QML的根对象

Qt Quick App的两种启动模式

QQmlApplicationEngine搭配Window
QQuickView搭配Item(Rectangle是Item的派生类)

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>
int main(int argc, char *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);
    // engine.load(url);
    
    //第二种
    QQuickView viewer;
    viewer.setResizeMode(QQuickView::SizeRootObjectToView);
    viewer.setSource(QUrl("qrc:/main.qml"));
    viewer.show();

    return app.exec();
}

使用qmlscene.exe运行QML

import QtQuick 2.2

Rectangle {
    id: rect;
    width:200;
    height: 200;

    //设置颜色的三个方式
    //color: "red";
    //color: "#ffffff";
    //color: Qt.rgba(0.1,0.6,0.4,1);
    
    //设置旋转
    rotation: 90;
    //渐变色
    gradient: Gradient{
        GradientStop {position:0.0; color: "#111111";}    
        G