1. 新建项目

新建名为PaintDemo的项目，如下：
image-20260812200151952

2. 界面布局

在UI设计师界面，拖拽对应的控件，修改显示的文字、控件的名称，然后完成布局

  • 合理地使用了水平、垂直、栅格布局
  • 合理地使用弹簧
  • 合理地调整Layout的各种参数，来设置外边距、内边距
  • 合理地调整字体大小
  • 在设计阶段，将左侧paintWidget的背景色修改为了白色：”background-color: rgb(255, 255, 255);”
  • 修改控件名，做到 “见名知意”

即可完成以下效果，多操作自然就熟练了(完成后的代码，会一并共享给大家的~)

布局完成效果如下：
image-20260812200305123

3. 控件类型提升

可以直接在左侧的paintWidget中进行绘制，它是QWidget类型
为了更方便地绘制，我们新建一个继承自QWidget的PaintWidget类，并将左侧paintWidget提升为PaintWidget类型
下面来看详细步骤：

首先，在左侧PaintDemo上右键，选择“Add New…”，添加一个 “cpp Class”，如下：
image-20260812200340403

此时，项目目录，如下：
image-20260812200355176

然后，在左侧paintWidget控件上右键，选择 “Prompt to …” 做类型提升，如下：
image-20260812200415363

按照步骤提升：① 输入要提升到的类名 ② 点击添加 ③ 提升
通过右侧的 “Object Inspector”，可以看到提升前后paintWidget的类型变化，如下：

效果1 效果2

此时运行，报错及其解决方法：

// 报错
error: paintwidget.h: No such file or directory

// 解决方法: 在CMakeLists.txt中，增加以下语句
target_include_directories(${PROJECT_NAME} PRIVATE
    ${CMAKE_CURRENT_SOURCE_DIR}
)

最后，运行成功后，左侧paintWidget的白色背景色没有生效，做如下修改：

PaintWidget::PaintWidget(QWidget *parent) : QWidget{parent}
{
    // 继承QWidget之后，样式表不起作用。需要增加以下代码
    this->setAttribute(Qt::WA_StyledBackground, true);
}

此时，运行效果：
image-20260812200542460