QML 仿ElementUI的基础控件库

目录

        前言

        开发环境

        一、按钮Button

        二、单选框RadioButton

        三、复选框Checkbox

        四、输入框Input

        五、计数器spinbox

        六、下拉选择框Combox

        七、开关Switch

        八、滑动条slide

        九、进度条progress 

        十、分页pagination

        ​十一、一些通知控件

        源码地址

        后记

             

前言

        本篇记录一下自己写的一些QML控件,由于个人没什么艺术细胞,控件原型借鉴了web端的控件框架ElementUI,有兴趣的读者可以去原地址了解 ElementUI

        由于篇幅有限,就不把源码贴上来了,需要源码的读者可以在文章末尾点击链接自行下载。 

开发环境

Qt 5.13.2 + Qt Creator 4.10.1 + MSVC2017/MinGW_64

一、按钮Button

 

按钮有两种样式,可以改变属性cusStyle来改变样式,属性值为Button里设定的两个枚举值。如:

EDangerBtn{
    cusText: "危险按钮"
    cusStyle: EDangerBtn.BtnStyle.Simple
}

图标按钮可以改变cusIcon属性自定义图标。图标的样式来自Fontawesome图标字体库,可搜索自己喜欢的图标进行替换

EIconBaseBtn{
    cusIcon: "\uf002"
    cusStyle: EIconBaseBtn.BtnStyle.Simple
}

二、 单选框RadioButton

三、复选框Checkbox

 四、输入框Input

五、 计数器spinbox

 

六、 下拉选择框Combox

 七、开关Switch

 八、滑动条slide

九、进度条progress 

十、 分页pagination

 十一、一些通知控件

源码地址

Gitee仓库地址

后记

        这次只写了一些基础控件,有机会把ElementUI中剩下的一些比较复杂的控件实现后到时再分享吧。这次的分享到这结束了,希望对各位有所帮助。

 

 

 

        

                 

  • 18
    点赞
  • 61
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
ElementUI Cascader 是一个基于 Vue.js 的组件,而 QML 是 Qt Quick 中用于声明式 UI 编程的语言,两者的实现方式略有不同,但可以尝试用 QML 实现类似的级联选择器功能。 以下是一个简单的 QML 实现 ElementUI Cascader 的例子: ```qml import QtQuick 2.12 import QtQuick.Controls 2.12 ApplicationWindow { visible: true width: 400 height: 300 title: "Cascader demo" property var options: [ { value: 'beijing', label: '北京市', children: [ { value: 'dongcheng', label: '东城区', children: [ { value: 'gulou', label: '鼓楼街道' }, { value: 'dongsi', label: '东四街道' } ] }, { value: 'xicheng', label: '西城区', children: [ { value: 'xidan', label: '西单街道' }, { value: 'fuchengmen', label: '阜成门街道' } ] } ] }, { value: 'shanghai', label: '上海市', children: [ { value: 'pudong', label: '浦东新区', children: [ { value: 'lujiazui', label: '陆家嘴街道' }, { value: 'zhangjiang', label: '张江镇' } ] }, { value: 'puxi', label: '浦西区', children: [ { value: 'jingan', label: '静安区' }, { value: 'xuhui', label: '徐汇区' } ] } ] } ] // 定义 Cascader 组件 Component { id: Cascader Column { spacing: 10 Rectangle { width: parent.width height: 30 color: "white" border.color: "lightgray" border.width: 1 Text { text: selectedLabel anchors.centerIn: parent } MouseArea { anchors.fill: parent onClicked: showMenu() } } Menu { id: menu x: parent.width y: 0 width: parent.width height: parent.height visible: false ListView { model: children delegate: Rectangle { width: parent.width height: 30 color: "white" border.color: "lightgray" border.width: 1 Text { text: label anchors.centerIn: parent } MouseArea { anchors.fill: parent onClicked: selectOption(value, label) } } } } function showMenu() { menu.visible = !menu.visible } function selectOption(value, label) { selectedValue = value selectedLabel = label menu.visible = false } } // 组件属性 property var options: [] property string selectedValue: "" property string selectedLabel: "" // 计算属性,用于获取当前选中的选项 property var selectedOption: { for (var i = 0; i < options.length; i++) { if (options[i].value === selectedValue) { return options[i] } var children = options[i].children if (children) { for (var j = 0; j < children.length; j++) { if (children[j].value === selectedValue) { return children[j] } var grandchildren = children[j].children if (grandchildren) { for (var k = 0; k < grandchildren.length; k++) { if (grandchildren[k].value === selectedValue) { return grandchildren[k] } } } } } } return {} } // 计算属性,用于获取当前选中的选项的子选项 property var children: selectedOption.children || [] // 选项的递归渲染函数 function renderOptions(options) { return options.map(function(option) { var children = option.children || [] return { value: option.value, label: option.label, children: renderOptions(children) } }) } // 初始化属性 function init() { options = renderOptions(options) selectedValue = options[0].value selectedLabel = options[0].label } // 初始化组件 Component.onCompleted: init() } // 使用 Cascader 组件 Cascader { anchors.centerIn: parent options: options } } ``` 在上面的例子中,我们使用了一个自定义的 Cascader 组件,它包含了一个文本框和一个下拉菜单,点击文本框时弹出下拉菜单,可以选择选项。选项的数据源是通过 options 属性传递进来的,每个选项都具有 value、label 和 children 三个属性,其中 children 是一个子选项数组。通过递归渲染子选项,可以实现级联选择器的功能。 需要注意的是,在这个示例中,我们只是简单地使用了 QML基础组件,而 ElementUI Cascader 还包含了很多复杂的功能,如搜索、多选、禁用选项等,如果要完整实现 ElementUI Cascader 的功能,需要考虑更多的细节和交互逻辑。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值