SwiftUI Essentials (SwiftUI の本質)

ユーザー入力の処理



訳注:以下、必要な場所においては Mac と iPhone 両方のセクションを提供しています。
Mac → セクション 6、iPhone → セクション 106 とします。







    FavoriteButton.swift


  1. import SwiftUI
  2. struct FavoriteButton: View {
  3. var body: some View {
  4. Text("Hello, World!")
  5. }
  6. }
  7. struct FavoriteButton_Previews: PreviewProvider {
  8. static var previews: some View {
  9. FavoriteButton()
  10. }
  11. }



    FavoriteButton.swift


  1. import SwiftUI
  2. struct FavoriteButton: View {
  3. @Binding var isSet: Bool
  4. var body: some View {
  5. Text("Hello, World!")
  6. }
  7. }
  8. struct FavoriteButton_Previews: PreviewProvider {
  9. static var previews: some View {
  10. FavoriteButton(isSet: .constant(true))
  11. }
  12. }



上記のリストで 7 行目に以下のように書き足します。


  1. var body: some View {
  2. Button(action: {
  3. isSet.toggle()
  4. }) {
  5. Image(systemName: isSet ? "star.fill" : "star")
  6. .foregroundColor(isSet ? Color.yellow : Color.gray)
  7. }
  8. }






    LandmarkDetail.swift


  1. import SwiftUI
  2. struct LandmarkDetail: View {
  3. @EnvironmentObject var modelData: ModelData
  4. var landmark: Landmark
  5. var landmarkIndex: Int {
  6. modelData.landmarks.firstIndex(where: { $0.id == landmark.id })!
  7. }
  8. var body: some View {
  9. ScrollView {
  10. MapView(coordinate: landmark.locationCoordinate)
  11. .ignoresSafeArea(edges: .top)
  12. .frame(height: 300)
  13. CircleImage(image: landmark.image)
  14. .offset(y: -130)
  15. .padding(.bottom, -130)
  16. VStack(alignment: .leading) {
  17. Text(landmark.name)
  18. .font(.title)
  19. .foregroundColor(.primary)
  20. HStack {
  21. Text(landmark.park)
  22. Spacer()
  23. Text(landmark.state)
  24. }
  25. .font(.subheadline)
  26. .foregroundColor(.secondary)
  27. Divider()
  28. Text("About \(landmark.name)")
  29. .font(.title2)
  30. Text(landmark.description)
  31. }
  32. .padding()
  33. }
  34. .navigationTitle(landmark.name)
  35. .navigationBarTitleDisplayMode(.inline)
  36. }
  37. }
  38. struct LandmarkDetail_Previews: PreviewProvider {
  39. static let modelData = ModelData()
  40. static var previews: some View {
  41. LandmarkDetail(landmark: modelData.landmarks[0])
  42. .environmentObject(modelData)
  43. }
  44. }



上記のリストの 22 行目以下をこのように書き換えます。


  1. VStack(alignment: .leading) {
  2. HStack {
  3. Text(landmark.name)
  4. .font(.title)
  5. .foregroundColor(.primary)
  6. FavoriteButton(isSet: $modelData.landmarks[landmarkIndex].isFavorite)
  7. }
  8. HStack {





セクション 1セクション 2セクション 3
セクション 4セクション 5セクション 6
セクション 101セクション 102セクション 103
セクション 104セクション 105セクション 106





目次
Xcode の新機能

フレームワーク

  • SwiftUI

  • ビルドリストとナビゲーション

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6

    セクション 7

    セクション 8


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    セクション 107

    セクション 108

    ユーザー入力の処理

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    パスとシェイプの描画

    セクション 1

    セクション 2

    セクション 3

    セクション 4


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    ビューと移行のアニメーション

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    複雑なインターフェースの構成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    UI コントロールを扱う

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    UIKit とのインターフェース

    セクション 1

    セクション 2

    セクション 3

    セクション 4


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    watchOS アプリの作成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    macOS アプリの作成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6

    セクション 7


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    セクション 107