Dock Widgets for Qt Quick

Goals

The primary goal of this patch is to bring dockable UI patterns to Qt Quick, similar to what QDockWidget provides in Qt Widgets. This enables developers to construct complex, user-reconfigurable interfaces using QML with native Qt Quick Controls styling.

Key features:

• Docking and undocking of panels (dock widgets)

• Floating windows for undocked content

• Tabbed groups of dock widgets

• Support for nested dock layouts

• Edge-based docking on all four sides

• Visual docking guides for intuitive placement

These components are implemented as Qt Quick Controls and follow established styling, structure, and behavior conventions to ensure consistency and customizability within Qt Quick applications.

---

Features

• Docking & Undocking
  Panels (dock widgets) can be dragged and dropped to different sides of the container or detached as floating windows.

• Tabbed Grouping
  Multiple dock widgets can be grouped together into a single container with tabs, enabling compact organization of related tools or views.

• Nested Docking Support
  Dock widgets or tab groups can be docked within existing dock areas or groups, allowing recursive layout structures similar to IDEs or professional design tools.

• Floating Windows
  Undocked panels automatically become floating windows using internal QQuickDockWindow, maintaining consistency and usability outside the main layout.

• Visual Docking Guide
  A custom visual guide (QQuickDockMoveGuide) appears during drag operations, displaying valid docking targets and highlighting the active docking side.

• Qt Quick Controls Styling
  All components are derived from Qt Quick Controls and follow its styling system. This makes them themeable and integrable into existing QML applications with minimal effort.

• Animated Layout Transitions
  Dock guide indicators support smooth transitions and animated highlights using Behavior elements for user-friendly feedback during drag-and-drop operations.

• Customizable Drop Indicators
  Developers can override and style individual indicators like panelLeft, windowTop, etc., to change the appearance or behavior of the guide.

---

Design Overview

QQuickDockContainer

Top-level manager of all docked and undocked areas. Hosts the layout logic for dock widgets and spawns floating QQuickDockWindow instances for undocked content.

QQuickDockArea

Organizes dock widgets into five logical sides: left, right, top, bottom, and center. Each side is implemented using a QQuickDockSideContainer.

QQuickDockSideContainer

A directional container (based on QQuickContainer) used inside a QQuickDockArea. It:

• Holds a set of dock widgets.

• Supports one-dimensional resizing (e.g., horizontal for left/right sides).

• Exposes a resizeHandle for user interaction, similar to SplitView.

QQuickDockWidget

Primary user-facing container. Represents content that can be:

• Docked into any edge or center zone.

• Grouped with others via tabbing.

• Undocked into its own floating window.

QQuickDockWidgetGroup

Enables tabbed grouping of multiple QQuickDockWidget instances. Each tab is displayed using the QQuickDockTabBar.

QQuickDockTabBar

A Control-based tab bar that integrates with QQuickDockWidgetGroup. It manages:

• Tab navigation (currentIndex)

• Tab layout and styling

• The list of dock widgets

QQuickDockMoveGuide

A visual guide shown during drag operations. It provides hints about valid docking targets with visual panels such as:

• panelLeft, panelRight, panelTop, panelBottom, panelCenter

• windowLeft, windowRight, windowTop, windowBottom for external drops

The guide can be fully customized, for example using custom indicators or animations. It reacts to drag state and highlights the active target area using the highlightRect and currentSide properties.

QQuickDockWindow

An internal-only type used to render floating dock widgets. It behaves like QQuickPopupWindow and is not meant to be used directly in QML.

---