SwiftUI使用AlertToast时弹窗仅显示在按钮区域如何解决？

安全阿岳

2026-10-7

问题原因

你将.toast修饰符挂载在了ButtonsGroup内部仅包裹按钮的VStack上，该VStack的尺寸仅适配按钮大小，Toast的显示范围被限制在了这个小尺寸容器内，因此无法全屏展示。

解决方案

将Toast的状态控制和修饰符上移到占满全屏的外层父容器上即可：

调整子组件ButtonsGroup的逻辑，将Toast显示状态改为外部传入的绑定值，移除内部的showToast状态声明：

struct ButtonsGroup: View {
    @Binding var showToast: Bool
    // 其余未使用的状态变量可直接删除
    @State private var showingAlert = false
    @State private var showingSheet = false
    @State private var showingActionSheet = false
    @State private var showButtonSheet = false

    var body: some View {
        VStack{
            Button("Show Toast"){
                 showToast.toggle()
            }
        }
    }
}

在页面的外层全屏容器中声明showToast状态，并且将.toast修饰符挂载到外层全屏容器上：

// 示例为你的页面根视图，需保证外层容器占满全屏
struct DemoPageView: View {
    @State private var showToast = false
    
    var body: some View {
        // 外层使用占满全屏的容器，比如ZStack、NavigationStack等
        ZStack(alignment: .center) {
            // 填充全屏的背景，保证容器占满屏幕
            Color.white.ignoresSafeArea()
            // 原有页面内容
            ButtonsGroup(showToast: $showToast)
        }
        // toast修饰符挂载到外层全屏容器
        .toast(isPresenting: $showToast){
            // 需要顶部弹出就设置displayMode为.hud，居中弹出可使用.alert模式
            AlertToast(displayMode: .hud, type: .regular, title: "Message Sent!")
        }
    }
}