SwiftUIでいこう。 - モディファイア

画面に表示する部分で大きさ、動きなどカスタマイズする場合に使われるのがモディファイアです。例えばText()のモディファイアは以下のように"."をつけて書いたものとなります(これは文字を大きくします)。

.font(.largeTitle)

このモディファイアを組み合わせたり、さらにカスタマイズをする時に使うのが"ViewModifier"ということになります。作ってみましょう。

プロトコルViewModifierに適合した関数を作れば使えるようになります。

struct Mark:ViewModifier{
    func body(content:Content) -> some View{
       HStack{
           Image(systemName: "checkmark.circle")
               .foregroundColor(.orange)
           content
       }
   }
}

簡単に使うには

.modifier(Mark())

をつければ反映されます。

struct Sample11View: View {
   
     var body: some View {
  
       Text("Hello")
         .font(.largeTitle)
         .modifier(Mark())
    }

見た目も通常のモディファイアと同じように使うためには、

extension View

Viewに機能を追加します。

extension View{
   func marked() -> some View{
       return self.modifier(Mark())
   }
}

Viewを拡張することで、

  Text("Hello")
       .font(.largeTitle)
       .marked()

というふうに使えるようになります。

見た目は

モディファイアを何もつけない場合

モディファイアをつけた場合は文字は大きく前にオレンジのチェックがついたものになります。

Xcode のPlaygroundで実行しています。

import SwiftUI
import PlaygroundSupport

struct Sample11View: View {

 var body: some View {
  
    Text("Hello")
       .font(.largeTitle)
       .marked()
 }
 
}
struct Mark:ViewModifier{
   func body(content:Content) -> some View{
       HStack{
           Image(systemName: "checkmark.circle")
               .foregroundColor(.orange)
           content
       }
   }
}

extension View{
   func marked() -> some View{
       return self.modifier(Mark())
   }
}

PlaygroundPage.current.setLiveView(Sample11View())