SwiftUI-CSSスタイルのシステム探索

スタイルシステムとは、UIデザインの視覚的な仕様から洗練された一部の仕様を指します。プロジェクトの全体的な色、フォント、サイズなど

アプリ開発におけるスタイルシステムの意味

UIデザイナーは、プロジェクトの全体的なUIビジュアル仕様を発行した後、スタイルシステムを開発および改良して、全体的なビジョンをよりよく把握できるようにします。UIデザイナーは、視覚的な仕様を整理し、一般的なルール、個々のルール、基本的なルール、および基本的なルールの操作方法を定義します。スタイルインターフェイスを開発および提供する場合は、次のことができるようにする必要があります。スケーラビリティと読みやすさを保証します。視覚的仕様を深く理解した後、設計された視覚的仕様はより有用で堅牢になります。
毎日の仕事では、効果をすばやく達成することが非常に重要です。

再利用可能。ビジュアルドラフトが元の仕様に従って実装されている場合、新しい要件のページも、ビルディングブロックのように、既存のスタイルを使用してすばやく構築できます。
メンテナンスが簡単。そして実際の作業では、特定のページで最も反復するのはおそらく視覚的な最適化です。使用されているスタイルシステムが処理している場合：2行から3行に変更する、ボタンの右上隅にアイコンを追加する、テキスト記述ブロック全体を右に移動する、など。必要に応じて、大幅な構造変更を必要とせず、すぐに実装できる場合（これは簡単です）新しい問題は解決されました）。つまり、スタイルシステムとUIインターフェースの分割が要件の変化に対応していることを意味します。それらのほとんどを処理できます（需要の追加と変更は、適切に設計されたコンポーネントです）。

iOS開発のスタイルシステム

Cocoa touchは、スタイルシステムの文法を提供しません。一般に、1つのレイヤーを単独でカプセル化できます。カプセル化のほとんどは比較的単純です。たとえば、アプリのボタンのみがファクトリクラスをカプセル化するか、ラベルセットのフォントサイズ、フォント、および色のみがカプセル化され、それ以上のカプセル化スタイルシステムは形成されません。その理由は、Cocoa touchは、設計の最初にオブジェクトを使用して一連の属性を表すことを考慮しておらず、スタイルシステムを設計する概念がなかったため、スタイルシステムをカプセル化して実装することがより困難になったためです。

SwiftUI-CSS

SwiftUIは記述的なインターフェース開発エクスペリエンスをiOSにもたらし、その機能構文と属性オブジェクトメソッドはSwift-CSSを使用してSwiftUIにスタイルシステムを実装することを可能にします。

SwiftUIのチェーン構文は、関数呼び出しの具体化です。SwiftUIエンティティは、ViewとContentModifierに分かれています。テキスト（ "g_kumar"）はビュー構造を担当し、.font（.title）は属性スタイルを追加します

Text("g_kumar")
      .bold()
      .font(.title)
Text("Notifications: \(self.profile.prefersNotifications ? "On": "Off" )")
Text("Seasonal Photos: \(self.profile.seasonalPhoto.rawValue)") Text("Goal Date: \(self.profile.goalDate, formatter: Self.goalFormat)")

スタイルのカプセル化。CSSStyleオブジェクトはスタイルオブジェクトをカプセル化し、そのスタイルはaddClassName修飾子を介して関数操作に挿入され、他のイベント、通知、およびスタイル（.frame \ .resizable）とシームレスに連携します。

// without SwiftUI-CSS
Image("image-swift")
                 .resizable()
                 .scaledToFit()
 .frame(width:100, height:100)  .cornerRadius(10)  .padding(EdgeInsets(top: 10, leading: 0, bottom: 15, trailing: 0)) // with SwiftUI-CSS let languageLogo_clsName = CSSStyle([  .width(100),  .height(100),  .cornerRadius(10),  .paddingTLBT(10, 0, 15,0) ]) Image("image-swift")  .resizable()  .scaledToFit()  .addClassName(languageLogo_clsName)

これらのうち、languageLogo_clsNameはロゴのスタイル名であり、このスタイルをページ上の他のロゴで直接再利用できます。