# note-book

**Repository Path**: songxiugang/node-book

## Basic Information

- **Project Name**: note-book
- **Description**: note-book.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-12
- **Last Updated**: 2024-10-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 记事本项目
#### 效果图
![输入图片说明](https://foruda.gitee.com/images/1728786914062762296/ac54adf0_11402638.png "屏幕截图")
#### 实现ui基本框架
1.添加三个Push Button，分别是打开、保存、关闭，更改类名为btnOpen,btnSave,btnClose
![输入图片说明](https://foruda.gitee.com/images/1728787378588026936/66844d9c_11402638.png "屏幕截图")
2.添加Widget控件，并设置颜色【改变样式表】，将三个pushButton设置水平布局拖到里面
background-color: rgb(70, 70, 70)
![输入图片说明](https://foruda.gitee.com/images/1728787734652195559/04692669_11402638.png "屏幕截图")
3.添加TextEdit控件以及底部的控件，底部需要显示光标的行列信息和字符编码。分别需要一个Label标签和ComboBox控件【用于下拉选项】
双击ComboBox控件添加下拉选项
![输入图片说明](https://foruda.gitee.com/images/1728788151084042712/2f49456f_11402638.png "屏幕截图")
4.同样，选中QLable控件和ComboBox控件并设置水平布局，新增一个Widget控件背景色设置和前面一样，将水平布局拖进去
![输入图片说明](https://foruda.gitee.com/images/1728789065412935538/24ed36a2_11402638.png "屏幕截图")
5.选中三大控件textEdit,widgetBottons,widgetBottom设置垂直布局
![输入图片说明](https://foruda.gitee.com/images/1728789406622959209/e61dcb45_11402638.png "屏幕截图")
6.底部和上方的控件显示不出来了，可以设置一下最小宽高
![输入图片说明](https://foruda.gitee.com/images/1728789592385725860/bdb96fad_11402638.png "屏幕截图")
7.基本样式如下
![输入图片说明](https://foruda.gitee.com/images/1728789947968408871/5620d623_11402638.png "屏幕截图")
#### 添加资源
![输入图片说明](https://foruda.gitee.com/images/1728789995484860468/9bf2b29f_11402638.png "屏幕截图")
![输入图片说明](https://foruda.gitee.com/images/1728790185961890949/a6d6b11d_11402638.png "屏幕截图")
1.更改主题和图标
![输入图片说明](https://foruda.gitee.com/images/1728790394606968435/29d10e72_11402638.png "屏幕截图")
#### 样式不随着窗体变化
![输入图片说明](https://foruda.gitee.com/images/1728790784779784282/b44d2012_11402638.png "屏幕截图")
解决办法：在widget.cpp中设置布局

```
setLayout(ui->verticalLayout);
```
![输入图片说明](https://foruda.gitee.com/images/1728790742356683356/4e683da9_11402638.png "屏幕截图")
#### 设置styleSheet QStyleSheet
将打开关闭保存按钮替换成不同的图片，并且鼠标悬浮、移出、点击会切换图片
打开:
```
QPushButton { border-image: url(:/icon/o1.png); }
QPushButton:hover { border-image: url(:/icon/o2.png); }
QPushButton:pressed { border-image: url(:/icon/o3.png); }
```
保存：
```
QPushButton { border-image: url(:/icon/s1.png); }
QPushButton:hover { border-image: url(:/icon/s2.png);; }
QPushButton:pressed { border-image: url(:/icon/s3.png);; }
```
关闭:
```
QPushButton { border-image: url(:/icon/c1.png); }
QPushButton:hover { border-image: url(:/icon/c2.png); }
QPushButton:pressed { border-image: url(:/icon/c3.png); }
```
#### 底部控件未随着拖拽变动
![输入图片说明](https://foruda.gitee.com/images/1728791701783476711/b04de107_11402638.png "屏幕截图")
底部的水平布局名称horizontalLayout_2，在widget.cpp构造函数中添加
```
ui->widgetBottom->setLayout(ui->horizontalLayout_2);
```
拖拽底部控件拉满
![输入图片说明](https://foruda.gitee.com/images/1728792019522207546/159fd8d8_11402638.png "屏幕截图")
用弹簧撑一下 右侧弹簧改成固定大小
![输入图片说明](https://foruda.gitee.com/images/1728792139753867962/184487c7_11402638.png "屏幕截图")
至此，基本布局设置完毕。