- 可以参考 OneNote for Windows 10 进行设计
- 将原生窗口的非客户区隐藏, 在客户区自己添加一个 topBar, 在右侧添加最小化, 最大化和关闭窗口的按钮, 在中间添加 label 用于展示应用程序的名称
- topBar 之下就是内容区域, 内容区域主要分为两个部分, 左侧部分是左侧的菜单栏, 右侧部分是页面, 用于显示内容。点击左侧菜单栏中的按钮即可切换右侧的页面, 并将选中的菜单栏设置为激活状态
- 使用到的QML技术
- 使用到的控件
- Rectangle: 主要用于布局(充当背景, 起到HTML中div的作用, 如果充当div而不是背景色, 一般将背景置为透明)
- Row: 也可以充当布局的功能, 一般用于布局中的每个元素大小相同
- Columns: 可以充当布局的功能, 一般用于布局中的每个元素大小相同
- Button: 最小, 最大和关闭按钮, 菜单栏中的按钮
- Label: 显示标题等
- Window: 主窗口
- Image: 图片, 用于 Button 上比较多
- Text
- TextField: 可以用来制作搜索功能
- UI 界面的层次结构
- MainWindow(Window)
- Background(Rectangle)
- Container(Rectangle)
- TopBar(Rectangle)
- ApplicationName(Label)
- Buttons(Rectangle)
- MinimizeButton(Button)
- MaximizeButton(Button)
- CloseButton(Button)
- Content(Rectangle)
- LeftMenu(Rectangle) 为了实现点击按钮会展开显示按钮的详细信息, 类似 OneNote, LeftMenu 的 clip 属性要设置成 true, 通过一些事件动态修改 LeftMenu 的 width 属性
- Button1(Button)
- Button2(Button)
- …
- Page(Rectangle)
- 显示动态加载的qml页面(可以使用Loader或者StackView, StackView加载动画)
- 布局常用到的属性
- Anchors.fill
- Anchors.verticalCenter
- Anchors.horizontalCenter
- Anchors.left
- Anchors.leftMargin
- Width
- Height
- sourceSize.height
- sourceSize.width
- fillMode
- Flags: 主要用于 Window, 这是 Qt.Window | Qt.FramelessWindowHint 可以取消非客户区
- 自定义组件
- 使用 property type name : value 定义属性, 当其他用户使用该组件的时候可以通过 name : value 的形式覆盖
- 使用 QtObject { id: functions; function1(){}; function2() {}} 将需要用到的函数放在 QtObject 对象中, 方便管理
- 使用 Connections { target: id; function onSignalName(arg){}} 保存与 Python 后端进行交互, 只要通过信号 Signal 的方式, Python 后端创建 Signal(str/填类型(这是为了传递参数给前端)) 对象, 在特定的时候调用 Signal.emit(参数), 就会启动前端中 Connections 中的 onSignal(参数) 函数并执行。其中 target: id用于相应 id 为 id 的组件的信号, 在 Python 中使用engine.rootContext().setContextProperty("id", ctx)设置
- 前端可以直接使用Connections规定的id, 调用 id 中的方法
- 后端需要通过信号.emit才能转到前端
- 动画
- 使用PropertyAnimation即可
- 加强效果
- 导入QtGraphicalEffects模块
- 常用到的是ColorOverlay和DropShadow
- ColorOverlay: 为图像上色
- DropShadow: 添加阴影
- 一定要实现的功能
- 因为删除了非客户区, 导致窗口失去了拖动, 鼠标移动缩放的功能, 需要加上去
- 使用到的API
- 主窗口的 startSystemMove 和 startSystemResize
- 使用到的组件
- MouseArea
- DragHandler