ちょっと、そこ！ iOSやmacOS上でユーザーインターフェースを構築するためのフレームワークである についてお話したいと思います。プログラミングに宣言型アプローチを採用しているため、非常に使いやすいです。 SwiftUI を使用すると、インターフェイスが何を行うべきか、どのように見えるかを記述することができ、残りはフレームワークが処理します。 SwiftUI  SwiftUI の重要な要素の 1 つは、プロパティ ラッパーの使用です。これらは、プロパティに追加のロジックを提供できる機能要素です。  SwiftUI には 5 つの主要なプロパティ ラッパーがあります。   @州 @バインディング @ObservedObject   @StateObject   @EnvironmentObject 彼らは開発においてあなたの親友になってくれるでしょう。   @州 使用すると、変更可能なプロパティを作成し、必要に応じて、これらの変更に基づいてインターフェイスを更新できます。たとえば、押されたときに色が変わるボタンを作成する場合は、色を保存する @State 変数を作成し、それをボタンに追加します。 @State を   struct MyButton: View { @State var buttonColor = Color.blue var body: some View { Button("Press me!") { buttonColor = Color.red } .background(buttonColor) } }  @バインディング これは通常、あるビューから別のビューに値を渡し、相互に対話できるようにするために SwiftUI で使用されます。たとえば、2 つのビューがあるとします。1 つはテキスト フィールド、もう 1 つはボタンです。ユーザーがボタンを押したときにテキストフィールドが更新されるようにします。これを行うには、@Binding を使用します。 @Binding を 使用すると、コードのある部分に格納されている値をコードの別の部分で使用できます。   struct ContentView: View { @State private var text = "" var body: some View { VStack { TextField("Enter text", text: $text) Button("Update text") { text = "New text" } SecondView(text: $text) } } } struct SecondView: View { @Binding var text: String var body: some View { Text(text) } } この例では、  使用して  (  にある) から  (  にある) に値を渡すため、ユーザーがボタンを押すと、テキスト フィールドが更新されて新しいテキストが表示されます。 @Binding を $text ContentView text SecondView   @ObservedObject   性があるプロパティをマークするために使用されます このプロパティ ラッパーは、  に準拠するオブジェクトの変更をサブスクライブし、データが変更された場合はインターフェイスの関連部分を自動的に更新します。  の使用例を簡単に示します。 @ObservedObject は、 監視され、外部データの変更に応じて変更される可能 。 ObservableObject プロトコル @ObservedObject   class UserData: ObservableObject { @Published var name = "John" } struct ContentView: View { @ObservedObject var userData = UserData() var body: some View { VStack { Text("Hello, \(userData.name)!") TextField("Enter your name", text: $userData.name) } } } この例では、@Published 名を含む UserData というクラスを作成します。 ContentView 構造では、   userData.name の値をテキストフィールドに表示し、画面に出力します。 @ObservedObject を使用して、タイプ UserData の userData というプロパティを作成します。 ユーザーが プロパティが これは、インターフェースを更新するために独自のコードが必要なく、SwiftUI がそれを行うことができることを意味します。 テキスト フィールドの値を変更すると、 名前 @Published を使用して公開および監視されるため、SwiftUI はインターフェイスの対応する部分を自動的に更新します。  @Published は、クラスまたは構造体のプロパティに追加できる Combine フレームワークのプロパティ ラッパーで、そのプロパティの値の変更に関する通知を、サブスクライブしているすべてのユーザーに自動的に送信します。 。言い換えれば、これは変更を追跡できるプロパティのヘルパー属性です。 注意:   @StateObject   これは、オブジェクトはビューが存在する限り保存され、ビューとともに破棄されることを意味します。通常、1 つのビューだけでなく ビューに必要なクラス オブジェクトの場合は、  を使用する方が実用的です 例えば： @StateObject は 、クラス オブジェクトを初期化し、それを SwiftUI のビューステートに保存するために使用されるプロパティ ラッパーです。 複数の @StateObject 。   class UserData: ObservableObject { @Published var name = "John" @Published var age = 30 } struct ContentView: View { @StateObject var userData = UserData() var body: some View { NavigationView { VStack { Text("Name: \(userData.name)") Text("Age: \(userData.age)") NavigationLink( destination: ProfileView(userData: userData), label: { Text("Edit Profile") }) } .navigationTitle("Home") } } } struct ProfileView: View { @ObservedObject var userData: UserData var body: some View { Form { TextField("Name", text: $userData.name) Stepper("Age: \(userData.age)", value: $userData.age) } .navigationTitle("Profile") } } この例では、  、複数のビューで使用できるいくつかのプロパティを含むクラスのオブジェクトです。このクラスは としてマークされているため、  および とともに使用できます。 UserData は ObservableObject @StateObject @ObservedObject     を使用して新しい オブジェクトを作成し、異なるビュー間の遷移間の状態を保存します。この場合、  ユーザー データを表示して視覚化し、ユーザー データの編集に使用できる別のビュー へのリンクを含みます。 ContentView では、 @StateObject UserData ContentView は (ProfileView)   では、  を使用して同じ オブジェクトにアクセスし、ユーザー データを変更します。ユーザーがデータを変更すると、同じ オブジェクトが使用されるため、  でデータが自動的に更新されます。 ProfileView @ObservedObject UserData UserData ContentView  1 つのビューからクラス オブジェクトの変更を監視する必要がある場合は @ObservedObject を使用し、複数のビューの表示に影響するクラス オブジェクトの状態を保存する必要がある場合は @StateObject を使用します。 注: 複数のビューで必要なオブジェクトに対して @StateObject の代わりに @ObservedObject を使用すると、各ビューがオブジェクトの独自のインスタンスを持つことになり、ビュー間のデータ同期で問題が発生する可能性があります。したがって、この場合は @StateObject を使用することをお勧めします。   @EnvironmentObject   これにより、Environment コンテナ (Scene、View、App など) に属する SwiftUI 階層内の任意のビューからデータ オブジェクトにアクセスできるようになります。たとえば、タスク リスト管理アプリがあると想像してください。タスクのリストと新しいタスクを作成する機能を含むルート 作成できます。このために、タスクのリストと新しいタスクを追加するボタンを表示する別の ビューを作成します。新しいタスクを追加した後、ユーザーはタスクの追加画面にリダイレクトされる必要があるため、別の ビューを作成します。 @EnvironmentObject は 、SwiftUI ビュー階層を介してデータ オブジェクトを渡すためのプロパティ ラッパーです。 ContentView を TaskListView AddTaskView   オブジェクトを 3 つのビューすべてに渡すには、  でそのインスタンスを作成し、それをパラメータとして と の両方に渡すことができます。ただし、ネストされたビューをさらに追加する場合は、多くの中間ビューを介して を渡す必要があるため、これが問題になる可能性があります。 UserManager ContentView TaskListView AddTaskView UserManager この代わりに、  を使用して、ビュー階層を通じて を渡すことができます。こうすることで、  にアクセスする必要があるすべてのビューは、UserManager を として宣言し、必要に応じて使用するだけで済みます。 @EnvironmentObject UserManager UserManager @EnvironmentObject   struct TaskManagerApp: App { @StateObject var userManager = UserManager() var body: some Scene { WindowGroup { ContentView() .environmentObject(userManager) } } } struct ContentView: View { var body: some View { NavigationView { TaskListView() } } } struct TaskListView: View { @EnvironmentObject var userManager: UserManager var body: some View { List(userManager.tasks) { task in TaskRow(task: task) } .navigationBarTitle("Tasks") .navigationBarItems(trailing: Button(action: { // Navigate to AddTaskView }) { Image(systemName: "plus") } ) } } struct AddTaskView: View { @EnvironmentObject var userManager: UserManager var body: some View { // Add new task using userManager } } したがって、  オブジェクトは を介して および に自動的に渡されます。 1 つのビューで の状態を変更でき、その変更は自動的にもう 1 つのビューに反映されることに注意してください。  UserManager @EnvironmentObject TaskListView AddTaskView UserManager この記事では、基本的な SwiftUI プロパティ ラッパー、  @State、@Binding、@ObservedObject、@StateObject、@EnvironmentObject について説明しました。 これらのプロパティ ラッパーは、SwiftUI でアプリの状態を操作するための基礎を形成します。この記事をチートシートとして使用して、SwiftUI でアプリを開発するために必要な基本的なプロパティ ラッパーをすぐに利用できるようにします。この知識を適用すると、状態が動的に変化するより複雑なユーザー インターフェイスを構築し、モデルのデータを SwiftUI に統合できるようになります。

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

SwiftUI の 5 つの主要なプロパティラッパーとそれらを効果的に使用する方法

About Author

コメント

ラベル

この記事は

Related Stories

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

SwiftUI の 5 つの主要なプロパティ ラッパーとそれらを効果的に使用する方法