可以实现单个、两个、四个圆角的qml自定义控件

news2024/11/17 7:24:07

控件名:
RadiusRectangle
File:
RadiusRectangle.qml

import QtQuick 2.0

Item {
    id: root
    width: 100
    height: 100
    clip: true
    property int itemRadius: 0
    property color itemColor: "red"
    property real itemOpacity: 1
    property int rightMargin: 0
    property int leftMargin: 0
    property int topMargin: 0
    property int bottomMargin: 0
    Rectangle {
        anchors.fill: parent
        width: 100
        height: 100
        color: root.itemColor
        opacity: itemOpacity
        anchors.rightMargin: -root.rightMargin
        anchors.leftMargin: -root.leftMargin
        anchors.topMargin: -root.topMargin
        anchors.bottomMargin: -root.bottomMargin
        radius: root.itemRadius
    }
}

使用:
main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 660
    height: 240
    title: qsTr("Hello World")

    SplitView
    {
        anchors.fill: parent
        orientation: Qt.Horizontal

        //一个圆角
        Grid
        {
            width: 200
            height: 200
            columns: 2
            rows: 2
            spacing: 20

            //画上边、左边直线==右下角圆角
            RadiusRectangle{
                itemRadius: 8
                topMargin: 8
                leftMargin: 8
                width: 80
                height: 80
                itemOpacity: 0.1//加上透明度
                itemColor: "red"
            }

            //画上边、右边直线==左下角圆角
            RadiusRectangle{
                itemRadius: 8
                topMargin: 8
                rightMargin: 8
                width: 80
                height: 80
                itemColor: "green"
            }


            //画下边、左边直线==右上角圆角
            RadiusRectangle{
                itemRadius: 8
                bottomMargin: 8
                leftMargin: 8
                width: 80
                height: 80
                itemColor: "purple"
            }

            //画下边、右边直线==左上角圆角
            RadiusRectangle{
                itemRadius: 8
                bottomMargin: 8
                rightMargin: 8
                width: 80
                height: 80
                itemOpacity: 0.5
                itemColor: "black"
            }
        }

        //两个圆角
        Grid
        {
            width: 200
            height: 200
            columns: 2
            rows: 2
            spacing: 20
            //下边直线==左上角和右上角
            RadiusRectangle{
                itemRadius: 8
                bottomMargin: 8
                width: 80
                height: 80
                itemColor: "blue"
                itemOpacity: 0.1
            }

            //上边直线==左下角和右下角
            RadiusRectangle{
                itemRadius: 8
                topMargin: 8
                width: 80
                height: 80
                itemColor: "yellow"
            }

            //右边直线==左上角和左下角
            RadiusRectangle{
                itemRadius: 8
                rightMargin: 8
                width: 80
                height: 80
                itemColor: "orange"
            }

            //左边直线==右上角和右下角
            RadiusRectangle{
                itemRadius: 8
                leftMargin: 8
                width: 80
                height: 80
                itemColor: "light blue"
                opacity: 0.8
            }
        }

        //四个圆角
        Grid
        {
            width: 200
            height: 200
            columns: 2
            rows: 2
            spacing: 20
            RadiusRectangle{
                itemRadius: 8
                width: 180
                height: 180

                itemColor: "pink"
                itemOpacity: 0.8
            }
        }
    }
}

效果:
在这里插入图片描述

优点:
加上透明度没毛病
缺点:
不能像css语法实现的任意角是圆角

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1499522.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Finetuning Large Language Models: Sharon Zhou

Finetuning Large Language Models 课程地址:https://www.deeplearning.ai/short-courses/finetuning-large-language-models/ 本文是学习笔记。 Goal: Learn the fundamentals of finetuning a large language model (LLM). Understand how finetu…

143:vue+leaflet 在25833投影坐标下,加载一小块图像叠层数据

第143个 点击查看专栏目录 本示例是介绍如何在vue+leaflet, 自定义CRS,形成新的投影,这里是25833投影,并使用 L.Proj.imageOverlay的方法在地图上加载载一小块图像叠层数据。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果. 文章目录 示例效果配置方式…

Redis冲冲冲——redis数据类型及对应的数据结构

目录 引出redis数据类型及对应的数据结构Redis入门1.Redis是什么?2.Redis里面存Java对象 Redis进阶1.雪崩/ 击穿 / 穿透2.Redis高可用-主从哨兵3.持久化RDB和AOF4.Redis未授权访问漏洞5.Redis里面安装BloomFilte Redis的应用1.验证码2.Redis高并发抢购3.缓存预热用户…

Pycharm的Project Structure (项目结构)

文章目录 一、Sources二、Tests三、Exeluded四、Namespace packages五、Templates六、Resources 一、Sources 源代码根目录:包含项目的主要源代码,它会在这个目录下搜索代码,然后自动补全和只能提示都通过这里的代码提供。若项目运行自定义代…

基于ACM32 MCU的电动滑板车方案介绍

随着智能科技的快速发展,电动滑板车的驱动系统也得到了长足的发展。国内外的电动滑板车用电机驱动系统分为传统刷式电机和无刷电机两种类型。其中,传统的刷式电机已经逐渐被无刷电机所取代,无刷电机的性能和寿命都更出色,已成为电…

深度解读NCDA设计大赛中园林/景观设计命题

未来设计师全国高校数字艺术设计大赛(NCDA)又在火热进行中,各个命题单元也都在陆续的发出自己的参赛要求,不知道各位大学生们准备的怎么样了。相信大家一定在全网搜索往年 NCDA 的获奖作品,今天我就给大家整理了一些 N…

【Pytorch】进阶学习:基于矩阵乘法torch.matmul()实现全连接层

【Pytorch】进阶学习:基于矩阵乘法torch.matmul()实现全连接层 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448…

在Jetson Xavier NX 开发板上使用VScode执行ROS程序详细过程

1.创建 ROS 工作空间ws 在home下打开终端输入下面指令 mkdir -p xxx_ws/src(必须得有 src) cd 自己命名_ws catkin_make2.启动 vscode cd 自己命名_ws code .3.vscode 中编译 ros 快捷键 ctrl shift B 调用编译,在上方弹窗位置选择:catkin_make:build 可以点击…

Find My产品越来越得到市场认可,伦茨科技ST17H6x芯片赋能厂家

苹果发布AirTag发布以来,大家都更加注重物品的防丢,苹果的 Find My 就可以查找 iPhone、Mac、AirPods、Apple Watch,如今的Find My已经不单单可以查找苹果的设备,随着第三方设备的加入,将丰富Find My Network的版图。产…

数据可视化原理-腾讯-分类散点图

在做数据分析类的产品功能设计时,经常用到可视化方式,挖掘数据价值,表达数据的内在规律与特征展示给客户。 可是作为一个产品经理,(1)如果不能够掌握各类可视化图形的含义,就不知道哪类数据该用…

阿珊详解Vue路由的两种模式:hash模式与history模式

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

PostgreSQL 流复制

文章目录 1.流复制介绍2.异步流复制2.1.主库部署2.2.备库部署2.3.测试 3.同步复制3.1.主库部署3.2.备库部署3.3.测试 4.主备切换 开源中间件 # PostgreSQLhttps://iothub.org.cn/docs/middleware/ https://iothub.org.cn/docs/middleware/postgresql/postgres-stream/1.流复制…

R语言基础的代码语法解译笔记

1、双冒号,即:“::” 要使用某个包里的函数,通常做法是先加载(library)包,再调用函数。最新加载的包的namespace会成为最新的enviroment,某些情况下可能影响函数的结果。而package name::funct…

怎么把amv格式转换成MP4? 几个步骤轻松搞定~

AMV文件格式的起源可以追溯到中国公司Actions Semiconductor,最初作为其MP4播放器的专有视频格式。在数码媒体领域蓬勃发展的时期,AMV格式因其小巧、高度压缩的特性而备受青睐,为便携设备提供了一种有效的视频存储解决方案。 MP4文件格式的特…

游泳池泵/过滤器/氯化器/潜水泵上架美国亚马逊UL1081测试

Ul是美国保险商试验所(UnderwritersLaboratoriesInc.)的简写。UL安全试验所是美国最有权威的,也是世界上从事安全试验和鉴定的较大的民间机构。它是一个独立的、营利的、为公共安全做试验的专业机构。它采用科学的测试方法来研究确定各种材料…

泛微OA服务器获取 token

泛微OA服务器获取 token 文章目录 泛微OA服务器获取 token一、泛微官方方法1 ecology 系统配置2 发放/生成许可证(appid)3 限制许可证使用ip地址(该步骤也可以跳过)4 使用 postman 注册5 获取 token6 访问业务系统接口 二、java 代码获取 token三、封装到…

【随笔记】小程序轮播图,一屏显示三个swiper-item

常见的轮播是一屏显示一个swiper-item,有的时候需要一屏显示三个swiper-item,左右两边都显示出一点 【目前小程序基础库2.12.3 效果正常,3.几的效果会有点不正常】 效果图 wxml <!-- 轮播begin --> <swiper wx:if="{{up_down}}" class="card-swipe…

GO: 快速升级Go版本

由于底层依赖升级了&#xff0c;那我们也要跟着升&#xff0c;go老版本已经不足满足需求了&#xff0c;必须要将版本升级到1.22.0以上 查看当前Go版本 命令查看go版本 go version[rootlocalhost local]# go version go version go1.21.4 linux/amd64 [rootlocalhost local]# …

3/7作业

信号同步 #include <stdio.h> #include <string.h> #include <unistd.h> #include <stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <pthread.h> #include <semaphore.h> sem_t…

Windows系统安装Jupyter Notebook并实现公网访问内网笔记服务

文章目录 1.前言2.Jupyter Notebook的安装2.1 Jupyter Notebook下载安装2.2 Jupyter Notebook的配置2.3 Cpolar下载安装 3.Cpolar端口设置3.1 Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 在数据分析工作中&#xff0c;使用最多的无疑就是各种函数、图表、…