Skip to content

feat: 完善普通文字按钮投影、内阴影与深色模式配色 - #671

Open
iCancely wants to merge 3 commits into
linuxdeepin:v25-flowstylefrom
iCancely:fix/normal-text-button-shadow
Open

feat: 完善普通文字按钮投影、内阴影与深色模式配色#671
iCancely wants to merge 3 commits into
linuxdeepin:v25-flowstylefrom
iCancely:fix/normal-text-button-shadow

Conversation

@iCancely

@iCancely iCancely commented Aug 26, 2026

Copy link
Copy Markdown

概述

完善普通文字按钮的投影、内阴影、渐变效果与深色模式配色,并将相关渲染基础设施(硬投影图像生成)一并补齐。

改动内容

恢复普通文字按钮的硬投影、内阴影和渐变效果

  • BoxPanel: 新增 enableDropShadow/enableInnerShadow/enableGradient 开关,默认关闭。硬投影(blur=0)使用两个圆角矩形在 BelowOrder 层绘制,由按钮自身背景和边框自然遮挡重叠部分,仅在外部显示带圆角的投影条带
  • FlowStyle: 修正 dropShadow/dropShadow2 调色板,normal/hover 远投影 rgba(0,0,0,0.05) 近投影 rgba(0,0,0,0.1),pressed 文字颜色与 normal 一致
  • ButtonPanel: 配置三种状态的硬投影偏移量,normal/hover 为 offsetY=2 + offsetY2=1,pressed 为 offsetY=1
  • Button: 仅普通文字按钮启用投影、内阴影和渐变

调整按钮投影硬度与深色模式 normal 调色板

  • BoxPanel: 投影矩形改为与 backgroundRect 同尺寸同圆角,加 antialiasing: false 使投影边缘为硬边
  • FlowStyle: dropShadow2 近投影 normal/hover 从 0.1 调整为 0.05;新增 normalDark 调色板:深色模式渐变背景、外描边、内阴影、投影配色

完善深色模式配色与硬投影渲染

  • BoxInsetShadow: blur=0 硬投影时使用对称 border 并加 1px padding,避免非对称 border 占满中心区域导致 BorderImage 无法拉伸
  • BoxPanel: 新增 overlayColor 叠加层;内阴影改为 blur=0/spread=0 硬边;新增 __hasVisibleHardDropShadow 判断,深色模式无外投影时描边完全内绘
  • InsideBoxBorder/OutsideBoxBorder: 新增 borderInside 属性,无外投影时描边完全内绘避免按钮外侧残留细线
  • FlowStyle: 深色模式渐变背景与内/外描边透明度调整,新增 hoveredDarkoverlayColor 调色板,flatBackground 深色模式配色更新
  • dquickimageprovider: 支持 blur=0 硬投影图像生成,内阴影偏移时补充不透明 padding 填充位移产生的间隙
  • 新增 ut_render_dark_hover 渲染测试

测试

新增 ut_render_dark_hover 渲染测试,覆盖深色模式 hover 状态按钮渲染。

Summary by Sourcery

Restore polished shadow and gradient effects for normal text buttons while improving dark-mode styling and hard-shadow rendering.

New Features:

  • Restore drop shadows, inner shadows, and gradient rendering for normal text buttons.
  • Add dark-mode button palettes and hover-state rendering coverage.
  • Support hard-edged shadow image generation, including offset inner shadows.

Bug Fixes:

  • Prevent border stretching artifacts and stray outer lines when rendering hard shadows without visible drop shadows.

Enhancements:

  • Make BoxPanel shadow, inner-shadow, and gradient effects opt-in so existing consumers retain their appearance.
  • Refine button state shadow offsets, border rendering, overlays, and light/dark color palettes.

Tests:

  • Add a dark-mode normal and hovered button rendering test.

- BoxPanel: 新增 enableDropShadow/enableInnerShadow/enableGradient 开关,
  默认关闭以保持其他控件外观不变。硬投影(blur=0)使用两个圆角矩形
  在 z=BelowOrder 层绘制,由按钮自身背景和边框自然遮挡重叠部分,
  仅在按钮外部显示带圆角的投影条带
- FlowStyle: 修正 dropShadow/dropShadow2 调色板,normal/hover 远投影
  rgba(0,0,0,0.05) 近投影 rgba(0,0,0,0.1),pressed 远投影
  rgba(0,0,0,0.1),pressed 文字颜色与 normal 一致
- ButtonPanel: 配置三种状态的硬投影偏移量,normal/hover 为
  offsetY=2+offsetY2=1,pressed 为 offsetY=1
- Button: 仅普通文字按钮启用投影、内阴影和渐变
- BoxPanel: 投影矩形改为与 backgroundRect 同尺寸同圆角,不再
  扩展 borderWidth;加 antialiasing: false 使投影边缘为硬边
- FlowStyle: dropShadow2 近投影 normal/hover 从 0.1 调整为 0.05;
  新增 normalDark 调色板:深色模式渐变背景 rgba(60,60,60,1)→
  rgba(45,45,45,1)、外描边 rgba(0,0,0,0.05)、顶部内阴影
  rgba(0,0,0,0.5)、底部内阴影 rgba(255,255,255,0.07)、
  dropShadow/dropShadow2 设为 transparent(深色无外投影)
- BoxInsetShadow: blur=0 硬投影时使用对称 border 并加 1px padding,
  避免非对称 border 占满中心区域导致 BorderImage 无法拉伸
- BoxPanel: 新增 overlayColor 叠加层;内阴影改为 blur=0/spread=0 硬边;
  新增 __hasVisibleHardDropShadow 判断,深色模式无外投影时描边完全内绘
- InsideBoxBorder/OutsideBoxBorder: 新增 borderInside 属性,无外投影时
  描边完全内绘避免按钮外侧残留细线
- FlowStyle: 深色模式渐变背景与内/外描边透明度调整,新增 hoveredDark
  与 overlayColor 调色板,flatBackground 深色模式配色更新
- dquickimageprovider: 支持 blur=0 硬投影图像生成,内阴影偏移时补充
  不透明 padding 填充位移产生的间隙
- 新增 ut_render_dark_hover 渲染测试
@deepin-ci-robot

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: iCancely

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@sourcery-ai

sourcery-ai Bot commented Aug 26, 2026

Copy link
Copy Markdown

Reviewer's Guide

该 PR 通过 BoxPanel 的可选效果开关、ButtonPanel 的状态参数和 FlowStyle 的多状态深色配色,恢复普通文字按钮的硬投影、内阴影与渐变;同时扩展 QImage 阴影生成器支持 blur=0,并调整描边边界处理以避免深色模式下的边缘伪影,最后加入深色 hover 渲染测试。

Sequence diagram for normal and dark-mode button rendering

sequenceDiagram
    participant Button
    participant ButtonPanel
    participant FlowStyle
    participant BoxPanel
    participant DQuickShadowProvider
    participant Borders

    Button->>ButtonPanel: enableDropShadow / enableInnerShadow / enableGradient
    ButtonPanel->>FlowStyle: selectValue for button state
    FlowStyle-->>ButtonPanel: background, shadow, border and overlay colors
    ButtonPanel->>BoxPanel: configure boxShadowBlur=0 and offsets
    BoxPanel->>DQuickShadowProvider: requestImage for hard shadow
    DQuickShadowProvider-->>BoxPanel: padded hard-shadow image
    BoxPanel->>Borders: set borderInside when no visible outer shadow
    BoxPanel-->>Button: render background, shadows, gradient and borders
Loading

File-Level Changes

Change Details Files
为 BoxPanel 恢复并细化可选的硬投影、内阴影和渐变渲染,并让普通文字按钮按状态启用这些效果。
  • 新增投影、内阴影、渐变及叠加层开关和双投影偏移配置,默认保持关闭以兼容其他消费者。
  • 使用与背景同尺寸、关闭抗锯齿的圆角矩形绘制 blur=0 硬投影,并通过层级遮挡仅保留外部投影条带。
  • 将内阴影切换为硬边渲染,按状态配置 normal/hover/pressed 的投影偏移和效果启用逻辑。
qt6/src/qml/BoxPanel.qml
qt6/src/qml/private/ButtonPanel.qml
qt6/src/qml/Button.qml
完善普通按钮 FlowStyle 调色板,增加深色模式的背景、边框、内外阴影及叠加层配色。
  • 调整 normal/hover/pressed 背景与文字颜色,并新增 hoveredDark、normalDark 和 overlayColor 配置。
  • 增加远近两级硬投影调色板,区分普通、悬停和按下状态。
  • 调整内阴影、内外描边及 flatBackground 的透明度和深色模式颜色。
qt6/src/qml/FlowStyle.qml
修正无可见外投影时的描边绘制范围,避免深色模式按钮边缘出现残留细线。
  • 为内外描边组件增加 borderInside 属性,使描边可完全绘制在父项内部。
  • 在 BoxPanel 中根据硬投影是否可见选择描边内绘或常规绘制,并调整外描边层级。
qt6/src/qml/InsideBoxBorder.qml
qt6/src/qml/OutsideBoxBorder.qml
qt6/src/qml/BoxPanel.qml
扩展硬投影图像生成基础设施,支持 blur=0 及带偏移的内阴影图像。
  • 移除 blur=0 的早期返回,生成带 1px padding 的硬边阴影源图像并跳过模糊处理。
  • 处理内阴影偏移导致的边缘间隙,通过不透明填充和源区域定位保持阴影贴合裁剪区域。
  • 调整硬投影裁剪路径,避免 padding 导致按钮四边出现额外阴影环。
src/private/dquickimageprovider.cpp
qt6/src/qml/BoxInsetShadow.qml
新增深色模式普通按钮渲染测试及测试资源注册。
  • 在暗色背景下覆盖 normal 和 hovered 按钮状态并抓取窗口图像。
  • 将测试源文件和 QML 测试场景加入构建与资源列表。
tests/ut_render_dark_hover.cpp
tests/qml/RenderDarkHoverButton.qml
tests/CMakeLists.txt
tests/data.qrc

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've reviewed your changes and they look great!


Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@18202781743
18202781743 self-requested a review August 26, 2026 02:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants