Apple Watch 模态表中的 SwiftUI 图像答案

【问题标题】：SwiftUI image in modal sheets for Apple WatchApple Watch 模态表中的 SwiftUI 图像
【发布时间】：2021-08-12 04:57:42
【问题描述】：

我想在正文中创建一个带有图像的模态表，就像在人机界面指南中一样。可以举个例子吗？

https://developer.apple.com/design/human-interface-guidelines/watchos/interaction/modality/

【问题讨论】：

标签： swiftui watchkit watchos modal-sheet

【解决方案1】：

以下代码基本上重新创建了上面的示例屏幕截图：

import SwiftUI

struct ModalView: View {
    @Binding var isPresented: Bool
    
    var body: some View {
        VStack {
            Image(systemName: "headphones")
                .font(.system(size: 30))

            Text("To play audio, connect Bluetooth headphones to your Apple Watch.")
                .font(.footnote)
                .multilineTextAlignment(.center)
        }
        .opacity(0.8)
        .padding(10)

        Spacer()

        Button("Connect a Device") {
            isPresented.toggle()
        }.padding(.horizontal)
    }
}

struct TestView: View {
    @State private var isPresentingModalView = false
    
    var body: some View {
        Button("Connect") {
            isPresentingModalView.toggle()
        }
        .fullScreenCover(isPresented: $isPresentingModalView) {
            ModalView(isPresented: $isPresentingModalView)
        }
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

结果：

请参阅文档： https://developer.apple.com/documentation/swiftui/view/fullscreencover(ispresented:ondismiss:content:)

【讨论】：