SwiftUI: ViewModifiers とは?

SwiftUI は、iOS アプリを作成するための一般的な選択肢になりつつあり、最も一般的に使用されるものの 1 つは ViewModifiers です。これを読む前に SwiftUI を使用したことがあり、ViewModifiers が何であるかわからない場合は、気付かずに以前にそれらを使用していたことを保証します。

ViewModifiers は、アプリで使用するビューで呼び出すメソッドで、ビューの外観と動作をカスタマイズします。これらを使用して、色やサイズを変更したり、ジェスチャを追加したり、アクセシビリティ オプションなどをビューに追加したりします。使用したことがある場合、.backgroundまたは.foregroundColorプロジェクトで、これらは ViewModifiers の例です。

ViewModifiers をどのように使用しますか?

プロジェクトを作成することから始めましょう。プロセス全体で退屈することはありません。プロジェクトを作成するときは、Storyboard ではなく SwiftUI を選択してください。

あなたのために作成されたデフォルトのビューはすでにいくつかの修飾子を使用しているので、それを見てみましょう

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: ビューのパディングを指定できます。値を指定しないため、すべての側面にシステムのデフォルトのパディングが適用されることに注意してください。.padding(.top, 12)このように、または.padding(.horizontal, 12)たとえば、エッジと値を指定できます
• .foregroundColor: ビューの前景色を設定し、テキストの色や色合いなどに影響を与えます

• .frame: ビューのサイズを変更するために使用されます
• .font: フォント ファミリ、サイズなどを変更するために使用します。Text

開始する前に、ボタンで使用する制約 (パディング、角の半径、背景色) を確認しましょう。

テキスト付きのシンプルなボタンを追加することから始めましょう。

Button(action: {
    // On click
}) {
    Text("Label")
}

修飾子を追加した後:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

上記の例は非常に単純ですが、プロジェクトに同様のスタイル (共通のパディング値、テーマの背景色など) を持つ多くのビューがある場合、同じ修飾子を繰り返さなければならないのは非常に面倒です。幸い、SwiftUI では独自のカスタム モディファイアを作成できます。

ボタンのテキストが作成しようとしていたものと正確に一致しないことに気付いた場合は、上記の例を考えてみましょう。ボタン テキストのカスタム修飾子を作成します。

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()