fix: fix titlebar control overlap at small window widths - #759
Open
add-uos wants to merge 1 commit into
Open
Conversation
Fix titleRowLayout width overflow by replacing the explicit "width: parent.width - 20" with left-right anchor binding so the RowLayout no longer overflows its parent container. Also raise the search edit responsive threshold from 400 to 500 so the search box and add button are only shown when the full content (468px) fits. 修复标题栏 titleRowLayout 宽度计算溢出问题，将显式宽度 parent.width - 20 改为左右双端锚定（leftMargin 30 + rightMargin 20），消除 10px 溢出； 将搜索框响应式显示阈值从 400 提高到 500，确保内容能完全容纳时才显示， 避免搜索框、添加按钮与菜单按钮/窗口控制按钮重叠。 Log: 修复音乐应用在768P或更小分辨率窗口居左或居右时标题栏控件重叠的问题 PMS: BUG-330047 Influence: 修复窗口在小分辨率下居左或居右时，标题栏搜索框和添加按钮因布局 溢出和响应式阈值过低而与右侧菜单按钮、窗口控制按钮重叠的问题。
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: add-uos The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
Reviewer's guide (collapsed on small PRs)Reviewer's GuideAdjusts the titlebar center layout anchoring and responsive threshold to prevent control overlap at small window widths. Flow diagram for updated responsive titlebar controlsflowchart LR
P[ParentTitleBar]
T[titleRowLayout]
P --> T
T[titleRowLayout\nanchors.leftMargin = 30\nanchors.rightMargin = 20]
W[titleRowLayout.width]
T --> W
W --> C{width > 500}
C -->|yes| SE_true[showSearchEdit = true]
C -->|no| SE_false[showSearchEdit = false]
W --> N{width > 300}
N -->|yes| SN_true[showNavButtons = true]
N -->|no| SN_false[showNavButtons = false]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
deepin pr auto review★ 总体评分：100分■ 【总体评价】
■ 【详细分析】
■ 【改进建议代码示例】 --- a/src/music-player/mainwindow/WindowTitlebar.qml
+++ b/src/music-player/mainwindow/WindowTitlebar.qml
@@ -210,14 +210,17 @@ TitleBar {
RowLayout {
id: titleRowLayout
- width: parent.width - 20
anchors {
left: parent.left
+ right: parent.right
leftMargin: 30
+ rightMargin: 20
}
// 响应式显示控制 - 使用内容区域自身宽度判断
- property bool showSearchEdit: titleRowLayout.width > 400
+ // 搜索框+添加按钮全部显示时需要约 468px（导航82+搜索300+添加36+边距50），
+ // 阈值取 500 确保内容能完全容纳时才显示，避免控件重叠
+ property bool showSearchEdit: titleRowLayout.width > 500
property bool showNavButtons: titleRowLayout.width > 300
RowLayout { |
Contributor
|
TAG Bot New tag: 7.0.63 |
Contributor
|
TAG Bot New tag: 7.0.64 |
Contributor
|
TAG Bot New tag: 7.0.65 |
Contributor
|
TAG Bot New tag: 7.0.66 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
根因分析
强根因：
WindowTitlebar.qml中titleRowLayout的width: parent.width - 20未计入anchors.leftMargin: 30，导致 RowLayout 右边缘溢出父容器（DTK TitleBar customCenter）10px，侵入菜单按钮区域。同时响应式阈值showSearchEdit: titleRowLayout.width > 400低于内容实际所需宽度 468px（导航82+搜索300+添加36+边距50），当宽度在 400~468px 之间时搜索框和添加按钮显示但无法容纳，AlignCenter/AlignRight布局导致控件互相重叠。关键证据：
WindowTitlebar.qml:216—width: parent.width - 20+leftMargin: 30→ 右边缘溢出 10pxWindowTitlebar.qml:220— 阈值 400 < 内容所需 468pxcustomCenter紧邻optionMenuBtn（菜单按钮），溢出直接侵入修复方案
width: parent.width - 20+anchors.left改为anchors.left + anchors.right双端锚定（leftMargin 30, rightMargin 20），消除溢出showSearchEdit阈值从 400 提高到 500，确保内容能完全容纳时才显示改动安全评估
低风险：仅调整 QML 布局属性和条件阈值，无函数签名变更，无外部调用者（References=0）。修改的代码行中，width/anchors 部分为 2023 年原始代码（非之前修复），阈值部分为 2026-01 修复的改进（非撤销）。
Summary by Sourcery
Adjust title bar layout responsiveness to prevent control overlap at small window widths.
Bug Fixes: