[QML] Popup 与 Dialog

1. 基础常用属性这些属性控制组件最基本的行为位置、大小、模态和关闭策略。核心属性modal(bool)描述:决定窗口是否为模态。true:窗口打开时会阻止用户与父窗口或其他窗口交互独占焦点。false:非模态用户可以点击窗口背后的内容。代码示例:modal: truex,y(real) /anchors描述:控制弹出窗口出现的位置。注意:在Popup中坐标通常是相对于父窗口的。代码示例:anchors.centerIn: parent(居中显示) 或x: 100; y: 100width,height(real)描述:定义弹出窗口的尺寸。注意:如果没有显式设置Popup会根据其内容ContentItem自动调整大小。closePolicy(enumeration)描述:定义什么操作会导致窗口自动关闭。常用值:Popup.CloseOnEscape: 按下 ESC 键关闭默认。Popup.CloseOnPressOutside: 点击窗口外部区域关闭。Popup.NoAutoClose: 禁用自动关闭必须通过代码或按钮关闭。代码示例:closePolicy: Popup.NoAutoClose生命周期信号onAboutToShow: 窗口即将显示前触发可用于准备数据。onOpened: 窗口显示动画结束后触发。onAboutToHide: 窗口即将隐藏前触发。onClosed: 窗口完全隐藏后触发可用于清理资源。2. 入门Dialog 的特有属性Dialog是专门用于显示消息、请求确认或收集简单输入的Popup。它内置了标题栏、内容区域和按钮区域。标准按钮standardButtons描述:快速添加常见的系统按钮如确定、取消、是、否。用法:使用|运算符组合多个按钮。示例:standardButtons: Dialog.Ok | Dialog.CancelonAccepted/onRejected描述:处理用户点击标准按钮的逻辑。onAccepted:当用户点击 Ok, Yes, Apply 等肯定按钮时触发。onRejected:当用户点击 Cancel, No, Close 等否定按钮时触发。内容定制title: 设置对话框标题栏的文字。label: 设置对话框主体显示的文本消息。contentItem: 如果你想放入复杂的控件如输入框、列表可以替换默认的内容区域。3. 进阶自定义与高级控制当你需要完全控制外观或行为时需要用到这些进阶属性。background: Rectangle { anchors.fill: parent color: #333333 //以此颜色为背景 border.color: #555555 radius: 5 }尺寸调整模式implicitWidth,implicitHeight: 推荐在自定义内容时使用让窗口根据内容自动计算大小而不是写死width/height。焦点处理focus:确保 Popup 打开时能接收键盘事件。forceActiveFocus():在onOpened中调用强制将焦点给到 Popup 内的某个特定输入框。弹出位置策略对于Popup你可以使用Popup.open(x, y)动态指定打开位置或者使用y: parent.height让它出现在父控件下方。4. 注意事项与常见坑层级关系:Popup默认会创建一个新的顶层窗口Overlay它会浮在应用程序的最上层。如果你希望它被限制在父控件内部不超出边界可以设置clip: true或者将其parent设置为具体的控件但在 Qt Quick Controls 2 中通常默认行为就是 Overlay。模态与关闭:如果设置了modal: true且closePolicy: Popup.NoAutoClose用户必须通过你提供的按钮代码逻辑pop.close()才能关闭窗口点击外部或按 ESC 均无效。这常用于“强制确认”的场景。Dialog 的按钮:使用了standardButtons后Qt 会自动生成按钮。如果你需要自定义按钮比如改变颜色或文字不要使用standardButtons而是手动在footer或contentItem中添加Button。生命周期:Popup默认是延迟实例化的。也就是说在Window启动时Popup的内容并没有立即创建直到第一次调用open()。如果你需要在程序启动时就访问 Popup 内部的控件可能需要设置visible: true或手动管理生命周期。5. 代码示例综合应用这是一个结合了上述知识点的完整示例展示了如何创建一个自定义外观、带输入框且强制模态的 Dialogimport QtQuick import QtQuick.Controls import QtQuick.Layouts Window { width: 640 height: 480 visible: true title: Popup Dialog 演示 // 触发按钮 Button { text: 打开自定义对话框 anchors.centerIn: parent onClicked: customDialog.open() } // 自定义 Dialog Dialog { id: customDialog modal: true focus: true closePolicy: Popup.NoAutoClose anchors.centerIn: parent // 建议使用 implicit 属性让 Dialog 根据内容自适应大小避免写死宽高导致内容被截断 implicitWidth: 300 implicitHeight: 250 // 1. 修复标题直接赋值字符串 // 1. 自定义标题 header: Rectangle { anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top height: 40 // 自定义标题栏高度 color: #2b2b2b // 标题栏背景 Text { text: 系统通知 font.bold: true font.pixelSize: 16 color: white anchors.centerIn: parent // 居中显示 } } // 2. 修复内容 // Dialog 的 contentItem 默认就是一个 ColumnLayout。 // 所以直接往里面放控件即可不要嵌套新的 Layout也不要设置 anchors.fill contentItem: Item { // 定义一个隐式高度告诉 Dialog 内容需要多高 implicitHeight: columnLayout.implicitHeight implicitWidth: columnLayout.implicitWidth ColumnLayout { id: columnLayout anchors.fill: parent // 这里是在 Item 内部填充是安全的 spacing: 10 Label { text: 请输入您的确认码 color: white wrapMode: Text.Wrap } TextField { id: inputField placeholderText: 在此输入... Layout.fillWidth: true // 显式指定高度防止某些样式下高度为0 implicitHeight: 30 color: white // 输入框背景微调可选 background: Rectangle { color: #333 border.color: inputField.activeFocus ? #555 : #444 radius: 4 } } } } // 3. // Dialog 的 footer 默认是 RowLayout footer: RowLayout { spacing: 10 // 不要在这里用 anchors.fill: parent这会干扰 Dialog 的宽度计算 Button { text: 取消 Layout.fillWidth: true onClicked: customDialog.close() } Button { text: 确认 highlighted: true Layout.fillWidth: true onClicked: { console.log(用户输入:, inputField.text) customDialog.close() } } } // 4. 自定义背景 background: Rectangle { anchors.fill: parent color: #2b2b2b border.color: #555555 radius: 8 border.width: 1 } // 信号处理 onAboutToShow: { inputField.text inputField.forceActiveFocus() } } }