You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让macOS容器应用完全透明,同时内部Flutter组件完全可见?

解决Flutter macOS窗口透明但Flutter组件保持不透明的问题

你遇到的核心问题是窗口透明配置导致Flutter内容继承了透明属性,同时缺少必要的窗口样式、点击穿透逻辑配置。以下是完整的修复方案:

1. 调整macOS窗口配置(MainFlutterWindow.swift)

修改窗口样式、层级和视图属性,确保窗口透明且不影响Flutter内容的不透明度:

import Cocoa
import FlutterMacOS

class MainFlutterWindow: NSWindow {

  override func awakeFromNib() {
    let flutterViewController = FlutterViewController.init()
    
    // 配置无边框无标题栏样式
    styleMask = [.borderless]
    // 让窗口显示在桌面上层
    level = .popUpMenu
    // 允许拖动窗口背景移动位置
    isMovableByWindowBackground = true
    // 移除窗口阴影,避免透明窗口出现多余阴影
    hasShadow = false
    
    self.contentViewController = flutterViewController
    
    RegisterGeneratedPlugins(registry: flutterViewController)

    super.awakeFromNib()
    
    // 开启窗口透明
    isOpaque = false
    backgroundColor = NSColor.clear
    // 确保Flutter视图层不继承窗口透明
    flutterViewController.view.wantsLayer = true
    flutterViewController.view.layer?.backgroundColor = NSColor.clear.cgColor
  }

  // 实现点击穿透:仅Flutter内容区域响应点击
  override func hitTest(_ point: NSPoint) -> NSView? {
    let hitView = super.hitTest(point)
    // 仅当点击Flutter视图或其子视图时才响应,其余区域穿透
    if hitView is FlutterView || hitView?.superview is FlutterView {
      return hitView
    }
    return nil
  }
}

2. 修正Flutter端UI背景(main.dart)

将Scaffold的背景色改为不透明的白色,确保Flutter组件内容可见且不透明:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // 设置白色不透明背景,替代原透明配置
        backgroundColor: Colors.white,
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24, color: Colors.black),
          ),
        ),
      ),
    );
  }
}

关键修复点说明

  • 窗口透明配置:通过isOpaque = false和backgroundColor = NSColor.clear实现窗口完全透明,同时用.borderless移除标题栏和边框。
  • Flutter内容不透明:将Scaffold的backgroundColor设为白色(或你需要的不透明颜色),避免Flutter内容继承窗口的透明属性。
  • 点击穿透实现:重写hitTest方法,只让Flutter视图区域接收鼠标事件,其余窗口区域点击会穿透到桌面或下层应用,符合你“完全可穿透点击,仅Flutter菜单和绘图区域可交互”的需求。

内容的提问来源于stack exchange,提问作者Avid Coder

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.26 06:10:15