100 Days of SwiftUI(DAY 39(Project8 part 1)

2020.8.8

GeometryReaderを使用して画面に合わせて画像のサイズを変更する
Resizing images to fit the screen using GeometryReader

struct ContentView: View {
    var body: some View {
        /*
        VStack {
            Image("IMG_1308")
            //.frame(width: 300, height: 300)
            //.clipped()
            //---------
            .resizable()
            //.aspectRatio(contentMode: .fill)
            .aspectRatio(contentMode: .fit)
            .frame(width: 300, height: 300)
        }
        */
        VStack {
            GeometryReader { geo in
                Image("IMG_1247")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: geo.size.width)
            }
        }
    }
}

ScrollViewでデータをスクロールする方法
How ScrollView lets us work with scrolling data

ScrollView:注意が必要な重要な注意点があります。スクロールビューにビューを追加すると、すぐに作成されます。
List:When that code runs you’ll see it acts lazily: it creates instances of only when really needed.

import SwiftUI

//----------------------
struct CustomText: View {
    var text: String

    var body: some View {
        Text(text)
    }

    init(_ text: String) {
        print("Creating a new CustomText")
        self.text = text
    }
}
//----------------------
struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 10) {
                ForEach(0..<100) {
                    CustomText("Item \($0)")
                        .font(.title)
                }
            }
            .frame(maxWidth: .infinity)
        }
        
        
//        List {
//            ForEach(0..<100) {
//                CustomText("Item \($0)")
//                    .font(.title)
//            }
//        }
    }
}

NavigationLinkを使用して新しいビューをスタックにプッシュする
Pushing new views onto the stack using NavigationLink
NavigationView
ビュースタックシステム
NavigationLink
SwiftUIで私が気に入っている点の1つは、NavigationLinkあらゆる宛先ビューで使用できることです。はい、カスタムビューを設計してプッシュできますが、テキストに直接プッシュすることもできます。

NavigationView {
    VStack {
        NavigationLink(destination: Text("Detail View")) {
            Text("Hello World")
        }
    }
    .navigationBarTitle("SwiftUI")
}

戻るボタンになり、それをタップするか、左端からスワイプして戻ることができます。

NavigationLink トピックをより深く掘り下げているように、ユーザーの選択に関する詳細を表示するためのものです。
sheet() 設定や作成ウィンドウなど、無関係なコンテンツを表示するためのものです。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0..<100) { row in
                //Text("Row \(row)")
                NavigationLink(destination: Text("Detail \(row)")) {
                    Text("Row \(row)")
                }
            }
            .navigationBarTitle("SwiftUI")
        }
    }
}

NavigationLinkとその閉じ中かっこをコメントアウトした場合)は、インジケーターが消えているのがわかります。

階層的なCodableデータの操作
Working with hierarchical Codable data


import SwiftUI

struct User: Codable {
    var name: String
    var address: Address
}

struct Address: Codable {
    var street: String
    var city: String
}

struct ContentView: View {
    var body: some View {
        Button("Decode JSON") {
            let input = """
            {
                "name": "Taylor Swift",
                "address": {
                    "street": "555, Taylor Swift Avenue",
                    "city": "Nashville"
                }
            }
            """
            
            // more code to come
            let data = Data(input.utf8)
            let decoder = JSONDecoder()
            if let user = try? decoder.decode(User.self, from: data) {
                print(user.address.street)
            }
        }
    }
}