【SwiftUI】CSSチックにViewにデザイン適用

swiftUIではText()やButton()などさまざまなViewがあり、
コードに記載することで、スクリーン上で表示されます。

HTMLでもText()であればspanタグ、pタグ、labelタグだったり、
Button()であればbuttonタグなど
同じようなことができ、
割と画面の描写についてはSwiftUIとHTMLとで近かったりします。

そんな中で、HTML()でstyle要素だったり、styleタグ、さらにはlinkタグで外部cssファイル読み込みなどで、
指定したものに対してcssを一括適用などができたりします。
であれば、SwiftUIでも同じようなことができるのではと思います。

簡単ですが以下のようにextensionを用いることでできます。

これができると、extensionの中身を変えるだけで、
一括でデザインを適用することができて保守も楽になります。

サンプルコード

extension Text{
    public func Title() -> Text{
        self.font(.title)
            .fontWeight(.medium)
            .foregroundColor(Color.black)
    }
}

extension Text{
    public func SubTitle() -> Text{
        self.font(.title)
            .foregroundColor(Color.blue)
    }
}

基本的なViewの1つであるText()についてCSSチックなことをやっていきます。
Text()に適用するので、extensionでTextクラスを拡張します。
そこで独自メソッド(モディファイア)を作成します。
モディファイアを適用しても返すのはTextオブジェクトなので、戻り値の方はTextになります。
そして、Textクラスのプロパティを見ると、さまざまな色やフォントなどのクラスを継承しているので、上記のような書き方を書くことができ、
独自モディファイアのTitle()ではfontの大きさや、黒色を指定しています。

これにより

   Text().Title()

と実行することで、フォントや黒色をそのまま適用できます。

 
以下のようにしてViewModifierを使うこともできます。

extension View{
    
    /**
     ログイン画面でのログインボタン
     */
    @ViewBuilder
    public func LoginButtonStyle() -> some View{
        self
            .frame(maxWidth: 200, minHeight: 30)
            .foregroundColor(Color.white)
            .overlay(
                RoundedRectangle(cornerRadius: 5)
                    .stroke(Color(red: 0.85, green: 0.564, blue:0.12), lineWidth: 2)
            )
            .background(
                RoundedRectangle(cornerRadius: 5, style: .continuous).fill(Color(red: 0.85, green: 0.564, blue:0.12))
            )
            .opacity(0.8)
        
    }
    
}

struct ContentView: View{
   var body: some View{
      VStack(){
         Button(action:{
         
         },label:{
             Text("ログインする").foregroundColor(Color.gray)
         }).LoginButtonStyle()
      }
   }
}