毎回たくさんのスタイルコードを書かなければなりませんか? ViewModifier を試して、統一されたスタイル仕様を作成してください

一緒に創造し、成長するために一緒に働きましょう！「ナゲッツデイリー新プラン・8月アップデートチャレンジ」参加30日目、クリックでイベントの詳細が表示されます。

プロジェクトの背景

ある日UI、彼は走ってきて指さしてApp页面言った：

2 つの同一のボタンを見ていますが、このボタンの線分が 2 番目のボタンの線分と異なるのはなぜですか?

コードを確認したところ、スタイルコードをコピーしたときに 1 行少なくコピーされていることがわかりました。これは少し恥ずかしいことです。

この事件の後假装反思、調べてみたのですが、UI设计それと同じで统一的样式、統一されたスタイルライブラリがシステムにあるので、毎回多くのスタイルコードをコピーする必要はありませんか?

早くやれよ。

プロジェクトの建設

まず、という名前の新しいSwiftUIプロジェクトを作成しますSwiftUIStyleSheet。

基本スタイル

まず、基本的なスタイルがどのように設計されているかを見てみましょう。簡単な文字按钮例を見てみましょう。

struct ContentView: View {
    var body: some View {
        Text("文如秋雨")
            .font(.system(size: 17))
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .clipShape(Capsule())
    }
}
复制代码

上記のコードでは、テキストボタンの一般的な修飾子 (fontフォント修飾子、foregroundColorフォント色修飾子、paddingマージン修飾子、background背景色修飾子、clipShape形状描画修飾子) を見ることができます。

ビューデコレータ

このAppスタイルのすべてのメインボタンがこのスタイルを使用している場合、モディファイアパーツを抽出してビューモディファイアを作成できます。ViewModifierコード構造は次のとおりです。

struct MainTitle: ViewModifier {
    func body(content: Content) -> some View {
        content
           //修饰符
    }
}
复制代码

上記のコードでは、テキストボタンの元の修飾子を抽出し、Textそれを新しいビュー修飾子に組み込みMainTitleます。テキストボタン修飾子は変更されますcontent。次に例を示します。

struct MainTitle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17))
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .clipShape(Capsule())
    }
}
复制代码

使用したい場合はmodifier、修飾子を呼び出すだけです。例:

struct ContentView: View {
    var body: some View {
        Text("文如秋雨")
            .modifier(MainTitle())
    }
}
复制代码

よりエレガントになりたい場合や、ビューモディファイアをモディファイアのように呼び出したい場合は、次のようなViewModifierこともできます拓展。

extension View {
    func mainTitle() -> some View {
        self.modifier(MainTitle())
    }
}
复制代码

このようにしてText、修飾子を追加すると、mainTitleビューを直接使用できます。次に例を示します。

struct ContentView: View {
    var body: some View {
        Text("文如秋雨")
            .mainTitle()
    }
}
复制代码

修飾子の役割

1 つのボタンでは効果が見えないかもしれません。表示するボタンをもう 1 つ作成しましょう。

struct ContentView: View {
    var body: some View {
        VStack(spacing:15){
            Text("文如秋雨")
                .mainTitle()
            Text("文如秋雨")
                .mainTitle()
            Text("文如秋雨")
                .mainTitle()
            Text("文如秋雨")
                .mainTitle()
        }
    }
}
复制代码

アプリケーションの異なるページが同じボタンスタイルを使用している場合、スタイルを一様に変更したい場合は、ViewModifierビューデコレータを変更するだけで済みます。次に例を示します。

struct MainTitle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .frame(maxWidth:.infinity)
            .font(.system(size: 17))
            .foregroundColor(.white)
            .padding()
            .background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing))
            .cornerRadius(8)
            .padding(.horizontal)
    }
}
复制代码

おめでとうございます。この章の内容をすべて完了しました。

是非、試してみてください。

このコラムが役に立ったら、いいね、コメント、フォローをお願いします〜