Apple Watch 模态表中的 SwiftUI 图像

Question

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

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

Answer 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:)

Apple Watch 模态表中的 SwiftUI 图像

SwiftUI image in modal sheets for Apple Watch

swiftui

watchkit

watchos

modal-sheet