iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Mobile Development

程式初學就來點swift吧!教你掌握整個蘋果生態圈!系列 第 28

Day 28 - ios 開發實作 (今天還要繼續吃嗎APP-2)

首先我們介紹一下這個APP的功能。

介紹

這個APP主要會有的功能如下:

  • 計算今天吃的東西類型
  • 計算熱量
  • 列出所有今天吃的熱量、類型

所以以下是這個APP的概念方向

  • 主頁
  • View A - 兩個Picker 分別為 輸入熱量、類別。
  • View B - 包入一個list 裡面包含計入的熱量。

所以首先我們先建立整個基礎。

不囉唆先上code。

Code

import SwiftUI
class UserInput: ObservableObject {
    @Published var sum:[Int] = [1]
    @Published var summ:[String] = ["1"]
}

struct ContentView: View {
    @StateObject var input = UserInput()
    var body: some View {
        NavigationView{
            VStack{
                NavigationLink(
                    destination: a1(),
                    label: {
                        Text("點進來計算熱量")
                    })
                NavigationLink(
                    destination: b1(),
                    label: {
                        Text("點進來計查看今日攝取")
                    })
            }
        }
        .environmentObject(input)
    }
}
struct a1: View {
    var a = [100,200]
    var b = ["中餐","晚餐"]
    @State var karl = 0
    @State var category = 0
    @State var karlsum = 0
    @State var categorysum = "0"
    @EnvironmentObject var input: UserInput
    var body: some View {
        VStack{
            Picker(selection: $karl, label: Text("請輸入熱量")) {
                Text("100").tag(0)
                Text("200").tag(1)
            }
            Picker(selection: $category, label: Text("請輸入類別")) {
                Text("中餐").tag(0)
                Text("晚餐").tag(1)
            }
            Button(action: {
                karlsum = 0
                karlsum = a[karl]
                categorysum = "0"
                categorysum = b[category]
                input.sum.append(karlsum)
                input.summ.append(categorysum)
                print(input.sum)
                print(input.summ)
            }) {
                Text("確認")
            }
        }
        
    }
    
}
struct b1: View {
    @EnvironmentObject var input: UserInput
    var body: some View {
        Text(String(input.sum[1]))
        Text(input.summ[1])
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
        a1()
        b1()
    }
}

講解

接下來我會一個個區塊分別細講。

class UserInput

這邊我們要使用昨天教的Passing data。首先用Publish建立兩個Array。

這邊兩個Array分別裝的就是紀錄進去的熱量、類別,這邊底下會用到。

struct ContentView

這邊就是我們的主畫面,裡面包含兩個NavigationLink。

要特別注意的是裡面會包含初始化UserInput。最後寫上.environmentObject(input)。

struct a1

這裡就來到比較複雜了。首先裡面會看到兩個Picker、一個Button,我們把要用值放在a、b兩個array中。

接著就是兩個Piccker包在Vstack裡面。

最下面的Button負責運算把選好的值放進sum、summ裡。把選好的用a、b叫出來,再分別傳送到sum、summ裡。這邊Print出來的用意是為了電腦上做測試時看的,因為我怕沒有加進去array所以把它print出來,這邊非必要。

struct b1

這邊我們就用@EnvironmentObject把sum、summ去調用出來,在下方顯示出來就可以了!


上一篇
Day 27 - ios 開發實作(今天還要繼續吃嗎APP-1、Swift UI Passing data 不同頁面傳值)
下一篇
Day 29 - ios 開發實作 (今天還要繼續吃嗎APP-3)
系列文
程式初學就來點swift吧!教你掌握整個蘋果生態圈!30

尚未有邦友留言

立即登入留言