qml开发笔记(二)：可视化元素基类Item详解（上半场anchors等等）

最新推荐文章于 2024-04-23 10:04:36 发布
最新推荐文章于 2024-04-23 10:04:36 发布
阅读量3.4w 收藏 10
点赞数 2
文章标签： qml 可视化 item anchors
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq21497936/article/details/78516201
版权

若该文为原创文章，未经允许不得转载
原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78516201
各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究

目录

前言

基类Item介绍

Image示例

捕捉键盘

输入处理

效果

属性详解

红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）

Qt开发专栏：qml开发（点击传送门）

 

    qml开发笔记(二)：可视化元素基类Item详解（上半场anchors等等）

 

前言

本章笔记主要详解Item元素（上半场主要涉及anchors锚），因为所有可视化的界面元素都继承于Item，熟悉Item后，不同的继承子类，有其定制的属性（从几个到几十个不等）。
 

基类Item介绍

    基类Item是所有可视化子类的父类，它不是可见的，但是它定义了所有通用元素通用的属性，比如x、y、width、height、anchoring和handingsuppourt。

    几个Item的使用示例    

Image示例

Item{
    Rectangle{
        width:1000;
        height:1000;
        color:"black";
        Image { // Image默认的背景是透明
        source:"1.png"// 相对于.qml的路径
        }
        Image{
            x:80
            y:200
            width:100
            height:100
            source:"1.png"
        }
        Image{
            x:190
            y:400
            width:100
            height:100
            fillMode:Image.Tile
            source:"1.png"
        }
    }
}

    效果如下图：

捕捉键盘

Item{
    focus:true
    Keys.onPressed:{
        if(event.key==Qt.Key_Left){
            console.log("moveleft");
            event.accepted=true;
        }
    }
    Keys.onReturnPressed:
        console.log("Pressedreturn");
}

输入处理

Rectangle{
width:100;
height:100
    FocusScope{
    id:focusScope
    focus:true
    TextInput{
        id:input
        focus:true
        }
    }
}

效果

 

属性详解

  • activeFocus : bool [可读写][指示焦点：窗口是否获取焦点]

        此属性指示元素是否具有活动焦点。如果指示是真的，这个对象是目前接收键盘输入，或是一个FocusScope为父对象的对象，目前接收键盘输入。

通常，此属性是通过设置焦点在其子元素（继承于Item）和其外围FocusScope对象获得。在下面的例子中，TextInput和FocusScope对象会有活跃的热点，而根矩形对象将不会。

  • activeFocusOnTab : bool [可读写][设置item是否可被tab选中,默认为false]
  • anchors:一组属性，提供了以元素相互关系为基准的定位方式，主要包括以下的：
  • anchors.top : AnchorLine [可读写][顶部边界]
Item {
    Image {
        id: pic;
        x:100;
        y:200;
        source: "./1.png";
    }
    Text {
        id: label;
        anchors.top: pic.bottom; // 对象的顶部是与pic的底部高度相同
        text: "hello world";
        color: "black";
        font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
    }
}


Item {
    Image {
        id: pic;
        x:100;
        y:200;
        source: "./1.png";
    }
    Text {
        id: label;
        anchors.bottom: pic.bottom; // 对象的顶部是与pic的底部高度相同
        text: "hello world";
        color: "black";
        font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
    }
}

Item {
    Image {
        id: pic;
        x:100;
        y:10;
        source: "./1.png";
    }
    Text {
        id: label;
        anchors.left: pic.right; // 对象的顶部是与pic的底部高度相同
        text: "hello world";
        color: "black";
        font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
    }
}

 

Item {
    Image {
        id: pic;
        x:100;
        y:10;
        source: "./1.png";
    }
    Text {
        id: label;
        anchors.right: pic.right; // 对象的顶部是与pic的底部高度相同
        text: "hello world";
        color: "black";
        font.pointSize: 14; //大于0的值,与设备无关font.pixelSize:单位为像素,依赖于设备
    }
}


Item {
    Image {
        id: pic;
        source: "./1.png";
    }
    Text {
        id: label
        // 对象的水平中心 以 pic的水平中心 为中心
        anchors.horizontalCenter: pic.horizontalCenter;        
        text: "hello world";
        color: "white";
        font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
    }
}


Item {
    Image {
        id: pic;
        x:100;
        y:10;
        source: "./1.png";
    }
    Text {
        id: label;
        anchors.verticalCenter: pic.bottom; // 对象的顶部是与pic的底部高度相同
        text: "hello world";
        color: "black";
        font.pointSize: 14; //大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
    }
}

  • anchors.baseline : AnchorLine AnchorLine [可读写][baseline是指的文本所在的线，如果item没有文字的话baseline就和top的位置是相同的]
Item {
    Image {
        id: pic;
        x:40;
        y:40;
        source: "./1.png";
    }
    Text {
        id: label;
        anchors.baseline: pic.top;
        text: "hello world";
        color: "black";
        font.pointSize: 14; //大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
    }
}

  • anchors.fill : Item [可读写][用本对象填充指向的对象元素]

 

Item{
    Image{
        id:pic;
        x:40;
        y:40;
        source:"./1.png";
    }
    Rectangle{
        id:label;
        anchors.fill:pic; // 此时设置width和height，测试无效，直接填满pic
        color:"black";
    }
}

  • anchors.centerIn : Item [可读写][用本对象的中心对准指向对象的中心，开始辐射出去，区域可大于设置指向的对象]

Item {
    Image {
        id: pic;
        x:40;
        y:40;
        source: "./1.png";
    }
    Rectangle {
        id: label;
        width: 60;
        height: 60;
        anchors.centerIn: pic; // 以pic的中心为该对象中心进行辐射（区域可大于pic）
        color: "black";
    }
}

  • anchors.margins : real [可读写][设置所有（top，bottom，left，right）边框的宽度]
Item {
    Image {
        id: pic;
        x:40;
        y:40;
        source: "./1.png";
    }
    Rectangle {
        id: label;
        width: 60;
        height: 60;
        color: "black";
        anchors.margins: 10;
        anchors.left: pic.right;
    }
    Rectangle {
        id: label2;
        width: 60;
        height: 60;
        color: "black";
        anchors.margins: 10;
        anchors.top: pic.bottom;
    }
}


Item {
    Rectangle {
        id: label;
        width: 60;
        height: 60;
        color: "red";
        anchors.margins: 50;
    }
    Rectangle {
        id: label2;
        width: 60;
        height: 60;
        color: "black";
        anchors.margins: 50; // 只对本对象设置anchors边框有效
        anchors.top: label.bottom;
    }
    Rectangle {
        id: labe3;
        width: 60;
        height: 60;
        color: "red";
        anchors.margins: 50; // 只对本对象设置anchors边框有效
        anchors.top: labe2.bottom;
    }
}


Item {
    Image {
        id: pic;
        source: "./1.png";
    }
    Rectangle {
        width: 30;
        height: 30;
        id: rect;
        color: "black";
        // 对象的水平中心 以 pic的水平中心 为中心
        anchors.horizontalCenter: pic.horizontalCenter;
        // 注意：horizomtalCenterOffset针对于horizontalCenter
        anchors.horizontalCenterOffset: 50;
    }
}

  • anchors.verticalCenterOffset : real [可读写][参照设horizontalCenter，与其类似]
  • anchors.baselineOffset : real[可读写][参照设horizontalCenter，与其类似]
  • anchors.alignWhenCentered : bool [可读写][指定不使用半个像素绘制图形，当需要居中一个elements，宽度或者高度是基数，不使用半个像素绘制，对此处理解有疑问]

 

原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78516201

长沙红胖子Qt
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【QML学习9】键盘响应
amnesiagreen的博客
04-16 729
文章目录1. 接收键盘的文字输入2. 在不同元素间切换兴趣点（元素导航）3. 按键响应 1. 接收键盘的文字输入 有两个元素可以接收键盘的文字输入：TextInput与TextEdit TextInput允许单行文字的输入，TextEdit支持换行。 下面是使用案例： Rectangle { width: 200; height: textEdit.y + textEdit.height * 2; color: "lightblue" TextInput { ancho
QML类型说明-Item
杞櫹椅桐的专栏
09-16 3001
Item ImportStatement:   import QtQuick 2.2 Instantiates:     QQuickItem Inherits:      QtObject InheritedBy:    AnimatedSprite,BorderImage, Canvas, Column, Flickable, Flipable, Flow, FocusScope,
探索QML Class Diagram：可视化QML类结构的利器
最新发布
gitblog_00033的博客
04-23 371
探索QML Class Diagram：可视化QML类结构的利器 项目地址:https://gitcode.com/CodeBees/QMLClassDiagram 项目简介 QML Class Diagram 是一个开源项目，专为Qt的QML编程语言设计，用于生成清晰、直观的类关系图。开发者可以通过这个工具快速理解QML代码的结构，提升代码阅读和维护效率。 技术分析 该项目基于Python语言开...
qml中锚点边距margin不生效的原因
十三阿哥的博客
02-15 325
【代码】qml中锚点边距margin不生效的原因。
qml项目---可视化面板（第三部分）--使用echarts以及qchart
Jinyizhi2233的博客
06-12 1114
这个是左边部分的三个图，最上面的那个柱状图是使用qchart，qt自带的图表类来实现的，下面两个都是通过echart来实现。由于当时想试一下qchart的，所以就画了一个qchart的图，总体而言，查看帮助文档，qchart的柱状图所能提供的属性以及函数较少，无法做到echart的那么多动作效果，但是qchart渲染极快，不存在需要很长时间才能显示图表。qt自带的qchart的库，可实现图表的显示，需要以下几个步骤：1、需要导入对应的chart模块，前提是你要下载好对应模块的chart.dll。
QML开发笔记(二)：创建QML项目
09-18
QML开发笔记(二)：创建QML项目:https://blog.csdn.net/zeor0/article/details/108660810 配合项目的配套资源
qml 实现Json可视化，头脑风暴
03-19
1 qml 实现Json数据可视化。
qmlAlembic：Qml Alembic插件可视化Alembic点云
02-05
qmlAlembic：Qml Alembic插件可视化Alembic点云
qml-virtualkey:纯QML应用内虚拟键盘
05-13
qml-virtualkey 纯QML应用内虚拟按键/键盘/游戏手柄
qml-box2d：Box2D QML插件
02-05
qml-box2d：Box2D QML插件
QML--可视元素
m0_73443478的博客
07-01 134
前面简单地介绍了几种QML的基本元素。在实际应用中，用户可以由这些基本元素再加以组合，自定义一个较互砸的元素，以方便重用，这种自定义的组合元素也被称为组件。QML提供了很多方法来创建组件，其中最常用的是基于文件的组件，它将QML元素放置在一个单独的文件中，然后给该文件一个名字，便于用户日后通过这个名字来使用这个组件。示例：自定以创建一个Button组件，并在主窗口中使用它：id: btnwidth: 100;height: 62Text {id: labletext: "开始"
anchors布局
weixin_44730555的博客
04-09 605
anchors布局 import QtQuick 2.2 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Rectangle { width: 300; height: 200;...
C++图形用户界面开发框架Qt 6.x- QML中的可视化元素
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-11 799
点击获取Qt下载 Rectangle类型 对于最基本的可视化效果，QtQuick提供了一个Rectangle类型来绘制矩形，这些矩形可以用颜色或垂直渐变着色，Rectangle 类型还可以在矩形上绘制边框。 要绘制矩形以外的自定义形状，请参阅Canvas类型或使用Image类型显示预渲染图像。 import QtQuick Item { width: 320 height: 480 Rectangle { color: "#272822" width: 320 height: 480...
qml保姆级教程一:布局组件
weixin_73548574的博客
09-29 799
qml布局组件,锚布局，水平布局，垂直布局，网格布局，流式布局，布局管理器
【QML 定位布局】锚布局
m0_60259116的博客
03-01 165
【QML 定位布局】锚布局
QML类型：Item
友善啊，朋友的博客
09-27 3535
一、描述 Item 类型是 Qt Quick 中所有可视项的基本类型。 Qt Quick 中的所有可视项都继承自 Item。尽管 Item 对象没有视觉外观，但它定义了所有视觉项的通用属性。 Item 类型可做为根元素包含视觉项目。 二、属性成员 1、implicitHeight : real、implicitWidth : real 隐式高度、隐式宽度：如果未指定宽度或高度，则定义项目的自然宽度或高度。 大多数项目的默认隐式大小为 0x0，但是有些项目具有无法覆盖的固有隐式大小，例如，Im
Qml学习——布局
weixin_45001971的博客
02-09 892
Qml学习——布局
qml 保存std::pair
08-26
在Qt中，可以使用QVariant类来保存std::pair数据类型。 首先，需要包含QVariant头文件： ```cpp #include <QVariant> ``` 然后，可以使用QVariant::fromValue()方法将std::pair数据类型转换为QVariant对象，示例如下： ```cpp std::pair<int, QString> myPair(10, "Hello"); QVariant variant = QVariant::fromValue(myPair); ``` 此时，myPair被转换为了QVariant对象variant。 如果需要从QVariant对象中恢复std::pair数据类型，可以使用QVariant::value()方法，示例如下： ```cpp std::pair<int, QString> restoredPair = variant.value<std::pair<int, QString>>(); ``` 现在，restoredPair就是之前保存在QVariant对象中的std::pair数据类型。 需要注意的是，QVariant只能保存可复制(concept of CopyConstructible)，可销毁(concept of Destructible)以及可比较(concept of Comparable)类型。如果std::pair的成员类型满足这些要求，那么它就可以被保存在QVariant对象中。 希望这个回答对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

长沙红胖子Qt

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值