SwiftUI即時編輯方法提升跨平台UI設計效率

Section(header: Text("Background")) {

    ColorPicker("Background Color", selection: $style.backgroundColor)

    Slider(value: $style.opacity, in: 0...1) {

        Text("Opacity")

    }

}

VStack(spacing: 20) {

  Text("Editable Text")

    .editableAtRuntime()



  Image(systemName: "pencil.circle.fill")

    .resizable()

    .frame(width: 60, height: 60)

    .editableAtRuntime()

}

//

//  ContentView.swift

//  OpenML

//

//  Created by Rohit Saini on 23/03/25.

//



import SwiftUI



struct ContentView: View {

  var body: some View {

    VStack(spacing: 20) {

      Text("Editable Text")

        .editableAtRuntime()

      

      Image(systemName: "pencil.circle.fill")

        .resizable()

        .frame(width: 60, height: 60)

        .editableAtRuntime()

    }

    .padding()

  }

}



#Preview {

  ContentView()

}





struct ViewStyle {

  var backgroundColor: Color = .clear

  var cornerRadius: CGFloat = 0

  var opacity: Double = 1.0

  var padding: CGFloat = 0

  var fontSize: CGFloat = 16

  

  

 // 支援疊加圖片 

var overlayImage: Image? = nil 

var overlayOpacity: Double = 0.5 

var showOverlay: Bool = true 

}



struct RuntimeModifierEditor : View { 

@Binding var style : ViewStyle 

@Binding var isPresented : Bool 



var body : some View { 

#if os(iOS) NavigationView { formContent 

.navigationTitle("Edit View") 

.toolbar { ToolbarItem(placement:.cancellationAction){ Button("Done"){ isPresented=false } } } } #else VStack{ formContent HStack{ Spacer() Button("Done"){ isPresented=false } .keyboardShortcut(.defaultAction) } .padding() } .frame(width :400,height :500 ) .padding() #endif }



var formContent : some View { Form{ Section(header :Text("Background")){ ColorPicker("Background Color",selection:$style.backgroundColor ) Slider(value:$style.opacity,in :0...1 ){ Text("Opacity")}} Section(header :Text("Layout")){ Slider(value:$style.padding ,in :0...50 ){ Text ("Padding")} Slider(value:$style.cornerRadius,in :.zero ...30 ){Text ("Corner Radius")}} Section(header :.init ("Font")){Slider (value:$style.fontSize,in :.init(8)...48 ){Text ("Font Size")}}Section (header :.init ("Overlay Image")){Toggle ("Show Overlay",isOn:$style.showOverlay ) Slider(value:$style.overlayOpacity ,in:.zero ...1){Text ("Overlay Opacity")} ImagePicker(image:$style.overlayImage)}}}

}



struct RuntimeEditableModifier :ViewModifier{

@State private var showEditor=false;

@State private var style=ViewStyle();



func body(content Content):some View{

ZStack{

content.font(.system(size :

style.fontSize)).padding(style.padding).background(style.backgroundColor).cornerRadius(style.cornerRadius).opacity(style.opacity ).overlay(

Group{

if style.showOverlay,let overlayImage=style.overlayImage{

overlayImage.resizable().scaledToFit().opacity(style.overlayOpacity)

}

})



Color.clear.contentShape(Rectangle())

.onTapGesture(count:

interactionTriggerCount){

showEditor=true }

.contextMenu{

Button("Edit View Properties"){

showEditor=true}}

}.sheet(isPresented:

$showEditor){

RuntimeModifierEditor(

style:

$style,isPresented:

$showEditor)}}



var interactionTriggerCount:Int{

#if os(macOS)

return2 // 雙擊觸發編輯器

#else return1 // 長按手勢另行處理#endif}}



extension View{

func editableAtRuntime()->some View{

modifier(RuntimeEditableModifier())}}



#if os(iOS)

import PhotosUI



struct ImagePicker:UIViewControllerRepresentable {@Binding var image :

Image?



func makeUIViewController(context Context)->PHPickerViewController{

var config=PHPickerConfiguration();config.filter=.images;let picker=PHPickerViewController(configuration :

config);picker.delegate=context.coordinator;return picker;}



func updateUIViewController(_ uiViewController:

PHPickerViewController,context Context){}

func makeCoordinator()->Coordinator{return Coordinator(self)}



class Coordinator:NSObject,PHPickerViewControllerDelegate{

let parent:

ImagePicker;init(_ parent :

ImagePicker){self.parent=parent}



func picker(_ picker :

PHPickerViewController,

didFinishPicking results:[ PHPickerResult]){

picker.dismiss(animated:true )

guard let provider=

results.first?.itemProvider,

provider.canLoadObject(ofClass:

UIImage.self)else{return }



provider.loadObject(ofClass:UIImage.self){

image,_ in if let uiImage=image as? UIImage { DispatchQueue.main.async {

parent.image =

Image(uiImage :

uiImage)}}

}}}}

#endif



#if os(macOS)

import AppKit



struct ImagePicker:

View {@Binding var image :

Image?



var body:

some View {Button(

"Choose Overlay Image"){

let panel=

NSOpenPanel();panel.allowedContentTypes=[.image];panel.begin{response in if response==.OK,let url =

panel.url,let nsImage=

NSImage(contentsOf:url ){

DispatchQueue.main.async {

image= Image(nsImage:

nsImage)}}}}}