实战|Qt开发WordBN笔记软件#09 学习行布局、列布局；实现主界面左右结构

01 背景

【WordBN字远笔记】是天恩软件工作室开发的一款免费笔记软件；WordBN基于VS2019、Qt6.5开发，使用Qt Quick（QML）开发语言。

本课程将以【WordBN字远笔记】的界面为实战基础，详细介绍如何基于Qt/QML开发语言，从零开始开发一套真正的程序，包括国际化、版本发布、安装包制作等项目实战技巧。

本课程重点不是教你如何开发一个笔记软件，而是教你如何利用Qt/QML+C++开发一个完整的程序，整套课程规划有40+章节，敬请关注！

---

本章内容《#09 学习行布局RowLayout、列布局ColumnLayout；实现主界面左右结构；左侧工具栏》

02 课程目标

• 学习行布局管理器RowLayout、列布局管理器ColumnLayout，以及Control、Button等控件的使用。
• 实现主界面左右结构：左侧快捷按钮工具栏，右侧编辑区域。
• 左侧工具栏：新建、最新、加星、标签、我的文件夹、垃圾箱、帮助按钮；右侧编辑区域先用颜色矩形框显示，界面结构如下图：

03 知识点

• Control：Control是QML中用于构建用户界面控件的基础类型。它提供了一系列属性和方法，用于定义控件的外观、行为以及与其他控件的交互方式。虽然Control本身并不直接创建可见的用户界面元素，但它为其他控件（如Button、CheckBox等）提供了必要的框架和基础设施。
• Button：Button 是一个用于创建可点击按钮的组件。用户可以通过点击按钮来触发某些操作，比如打开一个对话框、执行一个函数或导航到另一个视图。
• ColumnLayout：ColumnLayout 是一个用于组织子项（children）的垂直布局管理器，它将子项垂直地排列成一列。使用 ColumnLayout，可以轻松地将多个QML元素（如按钮、文本字段、图片等）垂直堆叠在一起，而无需手动设置每个元素的 y 位置和高度，从而简化了界面布局的过程。
• RowLayout：RowLayout是一个用于组织子项（children）的水平布局管理器，它将子项水平地排列成一行。这种布局方式非常适合于需要一行显示多个控件（如按钮、文本框等）的场景。

04 新建左侧快捷工具栏YQuickToolPane

• 左侧工具栏YQuickToolPane基于Control；利用ColumnLayout列布局管理包含新建、最新笔记、我的文件夹、帮助等多个Button按钮，代码例子如下：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Control {

    contentItem: ColumnLayout {

        Button {
            text: qsTr("新建")
            Layout.fillWidth: true
            Layout.preferredHeight: 32
        }

        Button {
            text: qsTr("最新笔记")
            Layout.fillWidth: true
            Layout.preferredHeight: 32
        }

        Button {
            text: qsTr("我的文件夹")
            Layout.fillWidth: true
            Layout.preferredHeight: 32
        }

        Item {
            Layout.fillHeight: true
        }

        Button {
            text: qsTr("帮助")
            Layout.fillWidth: true
            Layout.preferredHeight: 32
        }

    }

}

05 新增右侧编辑区域YEditArea

• 左侧编辑区域暂时用一个Recgangle矩形区域代替，后期再完善界面，代码如下：

import QtQuick
import QtQuick.Controls

Rectangle {
    color: "#ff0000"

}

06 主界面利用行布局RowLayout实现左右结构

• 修改YApplicationWindow.qml代码，利用RowLayout实现左右结构，代码如下：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.platform

ApplicationWindow {

    // ...    
    RowLayout {
        anchors.fill: parent

        YQuickToolPane {
            Layout.preferredWidth: 80
            Layout.fillHeight: true
        }

        YEditArea {
            Layout.fillHeight: true
            Layout.fillWidth: true
        }

    }

}

最终程序界面截图：

07 课后练习

• 工具栏增加标签、垃圾箱按钮。
• 实现点击左侧工具栏按钮，右侧编辑区域（Rectangle控件）显示不同颜色。
• 学习另外二个行列管理器的使用：Row、Column。

-End-

#想了解更多精彩内容，关注下方公众号，还有示例源码、开发工具免费下载。

本人小杨哥：

超20年C++开发经验，独立软件开发；著名开源产品高并发C++应用服务器MYCP作者；开源企业即时通讯软件Entboost首席架构师；开发有WordBN字远笔记等共享软件产品。

招C++/Qt开发学员，欢迎关注咨询~~