如何使tauri应用程序窗口具有圆角且窗口充满活力

Question

我正在尝试用 tauri 制作计算器，但是窗口活力的问题是有方角。

我试图改变 hRgnBlur 参数，而且我也遇到了这个 post 但无法在 Rust 中做到这一点。 我尝试了 CreateRoundRectRgn 和 SetWindowRgn 但窗口周围有大的白色边框

let hdc: HDC = HDC::default();
BeginPath(hdc);
AngleArc(hdc, 0, 0, 20, 0.0, 0.0);
EndPath(hdc);
let bb = DWM_BLURBEHIND {
    dwFlags: 1,
    fEnable: true.into(),
    hRgnBlur: PathToRegion(hdc),
    fTransitionOnMaximized: true.into(),
};
let _ = DwmEnableBlurBehindWindow(hwnd, &bb);

Answer 1

您是否考虑过制作完全透明的窗口，然后使用 CSS 制作圆角？

这里有一些资源供您使用：

1. 窗口定制
2. Window Vibrancy 插件特别适用于 Windows
3. 自定义窗口教程

Tauri 文档中的代码：

<div data-tauri-drag-region class="titlebar">
  <div class="titlebar-button" id="titlebar-minimize">
    <img
      src="https://api.iconify.design/mdi:window-minimize.svg"
      alt="minimize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-maximize">
    <img
      src="https://api.iconify.design/mdi:window-maximize.svg"
      alt="maximize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-close">
    <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
  </div>
</div>

CSS：

.titlebar {
  height: 30px;
  background: #329ea3;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
.titlebar-button:hover {
  background: #5bbec3;
}