当前位置： 首页 > article >正文

Qt天气预报系统设计界面布局第四部分右边

article 2025/3/1 8:13:36

Qt天气预报系统

  • 1、第四部分右边的第一部分
    • 1.1添加控件
  • 2、第四部分右边的第二部分
    • 2.1添加控件
  • 3、第四部分右边的第三部分
    • 3.1添加控件
    • 3.2修改控件名字

1、第四部分右边的第一部分

1.1添加控件

拖入一个widget，改名为widget04r作为第四部分的右边

在这里插入图片描述

往widget04r再拖入一个widget，改名为widget0404，作为第四部分右边的第一部分

在这里插入图片描述

改变widget0404的样式表

在这里插入图片描述

background-color: rgb(131, 131, 131);
border-radius: 10px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
background-color: rgb(131, 131, 131);     设置文本的颜色

border-radius: 10px;   创建圆角边框，所有四个角的曲率半径都是10像素

border-bottom-right-radius:0px;  设置元素右下角的圆角半径为0像素，取消右下角

的圆角效果

border-bottom-left-radius: 0px;  设置元素左下角的圆角半径为0像素，取消左下角的

圆角效果

2、第四部分右边的第二部分

2.1添加控件

往widget04r再拖入一个widget，改名为widget0405

在这里插入图片描述

改变widget0405的样式表 
background-color: rgb(131, 131, 131);
border-radius: 10px;
border-top-right-radius:0px;
border-top-left-radius:0px;
对widget0404和widget0405进行垂直布局

在这里插入图片描述

改变布局边距

在这里插入图片描述

3、第四部分右边的第三部分

3.1添加控件

往widget04r再拖入一个widget，改名为widget0406

在这里插入图片描述

复制粘贴上面今天和日期的标签，再把样式表改一改

在这里插入图片描述

再粘贴，复制6个

在这里插入图片描述

对widget0406进行栅格布局

在这里插入图片描述

修改widget0406的边距

在这里插入图片描述

对widget04r进行栅格布局

在这里插入图片描述

对整个widget0406进行水平布局

3.2修改控件名字

修改控件名字，方便后面的编程
在这里插入图片描述

整体界面如下图所示：
在这里插入图片描述


第四部分完成！

总结：至此，整个UI界面设计就完成了，接下来就开始编程了！

http://www.kler.cn/a/464022.html

相关文章：

  • 【玩转OCR | 腾讯云智能结构化OCR应用探索和场景实践】
  • 给vscode的新项目选择虚拟环境
  • 【漫话机器学习系列】032.代表点聚类算法（Representative-Based Clustering Algorithm）
  • STM32单片机芯片与内部57 SPI 数据手册 寄存器
  • k8s系列--通过docker拉取的镜像导入到 containerd中
  • misc-python脚本学习笔记
  • SPI通信-（STM32）
  • 机器学习代码中常用方法
  • 租用服务器还是服务器托管：哪种方案更适合您？
  • uni-app:实现普通选择器，时间选择器，日期选择器，多列选择器
  • SD-WAN组网：定义、优势与应用
  • 智能手机多源传感器融合的室内定位方法综述
  • html本地字符串处理工具｜去重、分割、求交集、求并集
  • SQL 实战：联合查询与子查询 – 数据比对与关联查询优化
  • PyTorch 中 reciprocal（取倒数）函数的深入解析：分析底层实现CPP代码
  • 人工智能及深度学习的一些题目
  • 机器学习研究方向有哪些创新点
  • vulnhub Empire-Lupin-One靶机
  • 27.循环里赋值了，循环外使用提示变量未赋值 C#例子
  • C++软件设计模式之模板方法模式