QT-CHECKBOX的美化记录

主要参考:
Qt Style Sheets Examples

官方例程上的原文如下:

QCheckBox {
    spacing: 5px;/*复选框文本与勾选框(就是左边的勾选小框框,自己瞎叫的)的距离*/
    /*还可以设置一些常用的属性,这里都是设置复选框而不是勾选框的。
    font:...
    background-color:...
    padding:...
    */
}

QCheckBox::indicator {
    width: 13px;/*勾选框的大小*/
    height: 13px;
}
/*勾选框未选中时的图像*/
QCheckBox::indicator:unchecked {
    image: url(:/images/checkbox_unchecked.png);
}
/*勾选框未选中时有光标停留的图像*/
QCheckBox::indicator:unchecked:hover {
    image: url(:/images/checkbox_unchecked_hover.png);
}
/*勾选框未选中被点击的图像*/
QCheckBox::indicator:unchecked:pressed {
    image: url(:/images/checkbox_unchecked_pressed.png);
}
/*勾选框选中时的图像*/
QCheckBox::indicator:checked {
    image: url(:/images/checkbox_checked.png);
}
/*勾选框选中时有光标停留的图像*/
QCheckBox::indicator:checked:hover {
    image: url(:/images/checkbox_checked_hover.png);
}
/*勾选框未选中时被点击的图像*/
QCheckBox::indicator:checked:pressed {
    image: url(:/images/checkbox_checked_pressed.png);
}
/*勾选框在未定状态时有光标停留的图像*/
QCheckBox::indicator:indeterminate:hover {
    image: url(:/images/checkbox_indeterminate_hover.png);
}
/*勾选框在未定状态时被点击的图像*/
QCheckBox::indicator:indeterminate:pressed {
    image: url(:/images/checkbox_indeterminate_pressed.png);
}

一般图像资源有三个添加选项可选:

  • background-image: 保持image原始尺寸
  • border-image:这个可以让image随边界自适应放大缩小
  • image:保持image原始尺寸,默认是repeat填充空白,要设置norepeat,

image-repeat:repeat-x 图像横向平铺
image-repeat:repeat-y 图像纵向平铺
image-repeat:repeat 图像横向和纵向都平铺
image-repeat:no-repeat 图像不平铺

在添个自己常用到的

QCheckBox::indicator:focus{
    border:-10px;/*当用方向按键选中时的情况,上面hover只能是鼠标悬停,这个可以补充下按键的情况*/
}
QCheckBox::indicator{
    position: absolute; //勾选框在QCheckBox的位置方式是绝对还是相对的,如果是relative,那勾选框好像无法随外框大小改变,只有在absolute时,长,宽不指定值就会随之改变
    top: 0px;  //勾选框的位置
    left: 0px;  //勾选框的位置
    color: #758794;
    width: 100%;//指定了宽,所在宽不变,高会随外框变化而变
    padding: 1px 0 0 0;
    margin-xx:勾选框外边距(与外框的距离)
    padding-xx:内边距(可以改勾选框大小)
}
QCheckBox{
     spacing:10px;// 文字与勾选框的距离
     margin-xx:外边距(外框与实际控件外界的距离)
     padding-xx:内边距(与勾选框的距离)
}

支持的属性看Supported HTML Subset
更具体的直接看CSS 参考手册

中文CSS教程

http://blog.csdn.net/du_bingbing/article/details/52755789#t8

  • 2
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp是一个基于Vue.js的跨平台开发框架,可以用于开发iOS、Android、H5等多个平台的应用程序。u-checkbox-group和u-checkbox是uniapp中的两个组件,用于实现多选功能和数据回显。 u-checkbox-group是一个多选框组的容器,可以包含多个u-checkbox组件。它通过v-model绑定一个数组来实现数据的双向绑定。当用户选择或取消选择某个u-checkbox时,对应的数据会自动添加或移除到绑定的数组中。 u-checkbox是一个单个的多选框,可以通过v-model绑定一个布尔值来表示是否选中。当用户选择或取消选择该多选框时,绑定的布尔值会自动更新。 要实现数据回显,首先需要在data中定义一个数组来存储选中的数据。然后,在u-checkbox-group中使用v-model绑定该数组。当需要回显数据时,只需要将对应的数据添加到数组中即可。 以下是一个示例代码: ``` <template> <view> <u-checkbox-group v-model="selectedItems"> <u-checkbox v-for="item in items" :key="item.id" :label="item.id" :value="item.name">{{ item.name }}</u-checkbox> </u-checkbox-group> <button @click="showSelectedItems">显示选中的数据</button> </view> </template> <script> export default { data() { return { items: [ { id: 1, name: '选项1' }, { id: 2, name: '选项2' }, { id: 3, name: '选项3' } ], selectedItems: [] }; }, methods: { showSelectedItems() { console.log(this.selectedItems); } } }; </script> ``` 在上面的示例中,items数组存储了所有的选项数据,selectedItems数组用于存储选中的数据。当用户选择或取消选择某个选项时,selectedItems数组会自动更新。点击"显示选中的数据"按钮时,会将选中的数据打印到控制台。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值