[bug] window.add_child dosen't work at tauri 2.0.5

[why0123]

Describe the bug

window.add_child dosen't work at tauri 2.0.5

 window
            .add_child(
                webview_builder,
                tauri::LogicalPosition::new(0, 86),
                PhysicalSize::new(size.width, size.height - 86),
            )

this code works well in tauri 2.0.1

but in tauri 2.0.5，it dosen't woked anymore.

Reproduction

No response

Expected behavior

No response

Full tauri info output

Environment
  › OS: Windows 10.0.22631 X64
  › Webview2: 128.0.2739.79
  › MSVC:
      - Visual Studio Community 2022
  › Node.js: 18.20.2
  › npm: 10.5.0
  › pnpm: 9.4.0
  › yarn: 1.22.19
  › rustup: 1.27.1
  › rustc: 1.80.1
  › cargo: 1.80.1
  › Rust toolchain: stable-x86_64-pc-windows-msvc

Stack trace

No response

Additional context

No response

[jianghaitaoo]

tauri2.0.6 too,now i change the version to tauri2.0.2,it is work

[Sylor-huang]

@why0123 @jianghaitaoo 可以请问下你们这个 app 的顶部的效果类似于 google 浏览器的顶部效果是怎么做到的呢？add_child 可以做到的吗？ 我打开新的浏览器的是这样的，没有 tab选项，没有前进/返回。 如果可以的话，可以分享下建议的 demo 代码的吗？

我是使用vue作为前端的，然后打开新窗口也是在前端打开的

import { WebviewWindow, getAllWebviewWindows } from '@tauri-apps/api/webviewWindow';

export async function openWindow(url, title) {
  let message = ""
  let success = true
  try {
    const allWindows = await getAllWebviewWindows()
    const windownsLen = allWindows.length
    const label = `NewWindow_${windownsLen + 1}`
    const openUrl = url || 'index.html'
    const newTitle = title || '新窗口'
    const openTitle = `${newTitle}-${windownsLen + 1}`
    const webview = new WebviewWindow(label, {
      url: openUrl,
      title: openTitle,
      width: 1080,
      height: 600,
      resizable: true,
      center: true,
      zoomHotkeysEnabled: true,
      backgroundColor: "#000",
    });
    webview.once("tauri://created", async () => {
      message = "打开成功"
    });

    webview.once("tauri://error", function (e) {
      message = `打开${openTitle}报错: ${e}`
      success = false
    });
    return { success: success, message: message }
  } catch (error) {
    return { success: false, message: error }
  }
}

[why0123]

@why0123 @jianghaitaoo 可以请问下你们这个 app 的顶部的效果类似于 google 浏览器的顶部效果是怎么做到的呢？add_child 可以做到的吗？ 我打开新的浏览器的是这样的，没有 tab选项，没有前进/返回。 如果可以的话，可以分享下建议的 demo 代码的吗？

我是使用vue作为前端的，然后打开新窗口也是在前端打开的

import { WebviewWindow, getAllWebviewWindows } from '@tauri-apps/api/webviewWindow';

export async function openWindow(url, title) {
  let message = ""
  let success = true
  try {
    const allWindows = await getAllWebviewWindows()
    const windownsLen = allWindows.length
    const label = `NewWindow_${windownsLen + 1}`
    const openUrl = url || 'index.html'
    const newTitle = title || '新窗口'
    const openTitle = `${newTitle}-${windownsLen + 1}`
    const webview = new WebviewWindow(label, {
      url: openUrl,
      title: openTitle,
      width: 1080,
      height: 600,
      resizable: true,
      center: true,
      zoomHotkeysEnabled: true,
      backgroundColor: "#000",
    });
    webview.once("tauri://created", async () => {
      message = "打开成功"
    });

    webview.once("tauri://error", function (e) {
      message = `打开${openTitle}报错: ${e}`
      success = false
    });
    return { success: success, message: message }
  } catch (error) {
    return { success: false, message: error }
  }
}

我是通过在一个 window 中构建多个 webview 的方式实现的，上面的tab其实是自己用 webview 画出来的一个页面，通过 tauri 的命令进行交互，进而动态地控制下方的 webview ，上下两个部分是分开来的。

如何创建子 webview 可以查看这里：WebviewBuilder

该功能不是默认功能，需要在 Cargo.toml 中开启特性：tauri = { version = "2.0.0", features = ["unstable"] }

部分创建新 webview 的代码：

let mut webview_builder =
     WebviewBuilder::new(label.clone(), tauri::WebviewUrl::App(url.into()))
         .disable_drag_drop_handler();

let webview = window
    .add_child(
          webview_builder,
          tauri::LogicalPosition::new(0, 86),
          PhysicalSize::new(size.width, size.height - 86),
    )
 .unwrap();

如果你希望自定义顶栏，并重绘相关控件，可以查看：window-customization

希望我理解了你的疑问，并且这个回答对你有帮助