Flutter Desktop全屏时标题栏怎么藏不住？

开发者景景提问于 2026-02-09 16:53:37 阅读 9

框架

在Flutter Desktop应用里，我想让窗口全屏时自动隐藏标题栏。按照官方文档设置了window参数，但运行后全屏模式下标题栏还是显示着，这是为什么啊？

我尝试过这样配置窗口：

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

然后在main.dart里用了Window.run(() { … })，还加了fullscreen: true的参数，但标题栏就是不消失。是不是还有其他设置没配？或者CSS样式冲突了？

桌面应用

我来解答赞 5 收藏

反馈

2 条解答

上官景川 Lv1

你这问题问偏了，body样式和Window.run这些是Web端的套路，Flutter Desktop压根不走浏览器那一套，CSS对原生窗口无效，你在WP里面搞惯了前端那套在这行不通。

Desktop端要藏标题栏得靠系统级API。Windows上得用flutter_acrylic或者bitsdojo_window这类插件，macOS得调NSWindow的styleMask。比如用bitsdojo_window的话，初始化时这么写：

void main() {

  doWhenWindowReady(() {

    appWindow.minSize = Size(800, 600);

    appWindow.size = Size(1280, 720);

    appWindow.titleBarStyle = TitleBarStyle.hidden;

    appWindow.show();

  });

  runApp(MyApp());

}

隐藏模式下交互区域会顶到屏幕最上方，注意给顶部内容留出安全边距。另外全屏状态建议配合setFullScreen(true)一起用，单设fullscreen参数不顶事。不同平台行为有差异，Windows和Linux还得额外处理拖拽移动的问题。

2026-02-11 15:18

___园园 Lv1

你这问题出在思路跑偏了。你现在写的CSS是给网页用的，但Flutter Desktop根本不是基于浏览器渲染的，它走的是原生窗口系统，所以你写body的margin、overflow这些样式完全不起作用，相当于在给一个不搭嘎的东西化妆。

Flutter Desktop要隐藏全屏时的标题栏，得靠平台相关的API来控制窗口行为，不能靠CSS。你在main.dart里用Window.run()这个也不对，那是Web端的API，Desktop压根不认这个。

正确的做法是：如果你用的是Windows或macOS，得通过flutter_window_size或者bitsdojo_window这类插件来控制原生窗口。比如用bitsdojo_window的话，初始化的时候加上：

doWhenWindowReady(() {

  appWindow.minSize = Size(400, 300);

  appWindow.size = Size(800, 600);

  appWindow.alignment = Alignment.center;

  appWindow.titleBarStyle = TitleBarStyle.hidden;

  appWindow.show();

});

关键就是titleBarStyle = TitleBarStyle.hidden这一句，才能真正把标题栏干掉。然后你再调用appWindow.maximize()进全屏，标题栏就不会露脸了。

另外提醒一句，不同平台兼容性要注意，macOS和Windows的窗口管理机制不一样，测试时得多跑几遍。别指望一套代码到处跑，桌面端就是这样，累但是没办法。

2026-02-09 17:03