专栏首页跟Qt君学编程兼容Qt4/Qt5版本Qml控件RoundRectangle

兼容Qt4/Qt5版本Qml控件RoundRectangle

可设置矩形圆角位置的控件。

文件导入

属性

  • radiusCorners: int

描述

  • 通过设置一个radiusCorners值,可控制圆角方向。
RoundRectangle {
    width: 100; height: 50
    color: "lightblue"
    radius: 10
radiusCorners: Qt.AlignLeft |                Qt.AlignRight |                Qt.AlignTop |                Qt.AlignBottom}

示例

属性文档

  • radiusCorners: int 设置圆角位置。
  • radiusCorners可使用的值:

常量

描述

Qt.AlignLeft

0x0001

与左边缘对齐

Qt.AlignRight

0x0002

与右边缘对齐

Qt.AlignTop

0x0020

与顶部对齐

Qt.AlignBottom

0x0040

与底部对齐

  • radiusCorners可使用的组合值范围:

关于更新

  • 文章首发于微信公众号你才小学生
  • 后续更新于Qtbig哥(qtbig.com)

源码

/**********************************************************
Author: Qtbig哥
WeChat Official Accounts Platform: nicaixiaoxuesheng (文章首发)
Website: qtbig.com(后续更新)
Email:  2088201923@qq.com
QQ交流群: 732271126
LISCENSE: MIT
**********************************************************/
import QtQuick 2.0

Rectangle {
    id: root
    property int radiusCorners: Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom /* Default: */
    /*
                            Qt.AlignLeft |      Qt.AlignLeft |      Qt.AlignRight |     Qt.AlignLeft |      Qt.AlignLeft |
                            Qt.AlignRight |     Qt.AlignTop |       Qt.AlignTop |       Qt.AlignRight |     Qt.AlignRight |
              None:0        Qt.AlignTop |       Qt.AlignBottom      Qt.AlignBottom      Qt.AlignTop         Qt.AlignBottom
                            Qt.AlignBottom
        *****************     *************       ***************   ***************       *************     *****************
        *               *    *             *     *              *   *              *     *             *    *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *    *             *     *              *   *              *    *               *    *             *
        *****************     *************       ***************   ***************     *****************     *************
    */

    Repeater {
        model: [ {
                x: 0,
                y: 0,
                visible: internal.aligns(Qt.AlignLeft | Qt.AlignTop),
                radius: root.radius
            },
            {
                x: root.width - root.radius,
                y: 0,
                visible: internal.aligns(Qt.AlignRight | Qt.AlignTop),
                radius: root.radius
            },
            {
                x: 0,
                y: root.height - root.radius,
                visible: internal.aligns(Qt.AlignLeft | Qt.AlignBottom),
                radius: root.radius
            },
            {
                x: root.width - root.radius,
                y: root.height - root.radius,
                visible: internal.aligns(Qt.AlignRight | Qt.AlignBottom),
                radius: root.radius
            } ]

        Rectangle {
            x: modelData.x; y: modelData.y
            width: modelData.radius; height: width
            visible: !modelData.visible
            color: parent.color
        }
    }

    QtObject {
        id: internal

        function aligns(direction) {
            return (root.radiusCorners & direction) === direction
        }
    }
}

本文分享自微信公众号 - Qt君(qtjuna),作者:Prosa

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Qt 5.13版本正式发布(带下载链接)

    今天,我们发布了 Qt 5.13,我为每个人都投入的所有工作感到自豪。与往常一样,我们的版本带有新功能,更新,错误修复和改进。对于Qt 5.13,我...

    Qt君
  • QtCreator画UML

      Qt君和往日一样,被分配了一个任务,就是设计一个网络模块。Qt君看到任务一到就来劲了,立马就做了起来。

    Qt君
  • Qt 5.14版本正式发布(带下载链接)

      我们今天(2019-12-12)发布了Qt 5.14。该版本以及明年的Qt 5.15 LTS开始为通向Qt 6铺平道路。

    Qt君
  • Qt 5.14版本正式发布(带下载链接)

      我们今天(2019-12-12)发布了Qt 5.14。该版本以及明年的Qt 5.15 LTS开始为通向Qt 6铺平道路。

    Qt君
  • Qt 5.13版本正式发布(带下载链接)

    今天,我们发布了 Qt 5.13,我为每个人都投入的所有工作感到自豪。与往常一样,我们的版本带有新功能,更新,错误修复和改进。对于Qt 5.13,我...

    Qt君
  • 基于NXP i.MX28 MPU的疫情监控平台2-Qt环境搭建

    Qt 是一个跨平台的应用程序开发框架。使用Qt开发的应用程序,只需要编写一套代码,然后把这套代码放在不同平台的Qt环境去编译,就会生成可以运行在对应平台的应用程...

    单片机点灯小能手
  • Qt介绍及环境搭建

    Qt是一个跨平台应用程序和UI开发框架。使用Qt只需一次性开发应用程序,无须重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序。Qt Softwar...

    DeROy
  • Qt widget vs Qt Quick

    并不是说web语言不好, 我很喜欢web, 从一开始学习html到后来入坑nodejs可以说web领域给我带来了很多的见识同时还payed my bil...

    Jean
  • Qt 5.15长期支持版本正式发布

      为了帮助准备过渡到Qt 6,在Qt 5.15版本中已将许多将从Qt 6.0中删除的类和成员函数标记为已弃用。除非您在项目中定义QT_NO_DEPRECATE...

    Qt君
  • Qt官方示例-Quick Control.1样式

    Qt君

扫码关注云+社区

领取腾讯云代金券