QML

• 可以参考 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