【SwiftUI实战篇】1、从零开始使用SwiftUI编写一个美食APP

我以前使用自己的CMS写了一个美食类的网站：https://www.meishiq.com 从今天开始我将通过目的对SwiftUI的理解开始着手为这个网站写一个APP，我将把代码与过程完整的记录下来，以便学习与分享。

一准备工作

目前因为有后台和数据的支持，我只需要开发数据接口就可以和APP进行对接的工作，未来我将使用GO语言重写现在的CMS系统，升级功能与效率，目前一直忙于swiftUI的学习，所以先使用PHP做为接口。

因为有自己的CMS加持，写接口非常简单，耗时不多，因为本篇是以写swift为主，所以PHP这部分不做记录。

1、新建美食圈项目

命名为meishiq，并规模以下目录，日后 可能会根据项目情况重命名或者 移出不需要的目录。

2、backend目录 -> APIService.swift 代码未编写：

import Foundation
//远程数据获取
struct APIService {
    static let baseURL = URL(string: "https://www.meishiq.com/")! //远程数据接口
    static let apiKey = "1xxxxxxxxxxxxxxxxxxxx" //保护数据安全
}

3、extension扩展目录 ->Font+TitleFont.swift 简单的几个字体扩展统一存放：

mport Foundation
import SwiftUI

extension Font {
    public static func FHACondFrenchNC(size: CGFloat) -> Font {
        return Font.custom("FHA Condensed French NC", size: size)
    }
    
    public static func AmericanCaptain(size: CGFloat) -> Font {
        return Font.custom("American Captain", size: size)
    }
    
    public static func FjallaOne(size: CGFloat) -> Font {
        return Font.custom("FjallaOne-Regular", size: size)
    }
}

struct TitleFont: ViewModifier {
    let size: CGFloat
    
    func body(content: Content) -> some View {
        return content.font(.FjallaOne(size: size))
    }
}

extension View {
    func titleFont(size: CGFloat) -> some View {
        return ModifiedContent(content: self, modifier: TitleFont(size: size))
    }
    
    func titleStyle() -> some View {
        return ModifiedContent(content: self, modifier: TitleFont(size: 18))
    }
}

View+PosterStyle.swift 的扩展：

struct PosterStyle: ViewModifier {
    enum Size {
        case small, medium, big, tv
        
        func width() -> CGFloat {
            switch self {
                case .small: return 53
                case .medium: return 100
                case .big: return 250
                case .tv: return 333
            }
        }
        func height() -> CGFloat {
            switch self {
                case .small: return 80
                case .medium: return 150
                case .big: return 375
                case .tv: return 500
            }
        }
    }
    
    let loaded: Bool
    let size: Size
    func body(content: Content) -> some View {
        return content
            .frame(width: size.width(), height: size.height())
            .cornerRadius(5)
            .opacity(loaded ? 1 : 0.1)
            .shadow(radius: 8)
    }
}
extension View {
    func posterStyle(loaded: Bool, size: PosterStyle.Size) -> some View {
        return ModifiedContent(content: self, modifier: PosterStyle(loaded: loaded, size: size))
    }
}

4、indexView目录 -> RecommendedView.swift 推荐菜谱视图

                        -> FoodView.swift 食材视图

                        -> SelectView.swift 精选菜谱

                        -> DailyCookView.swift 每日推荐

                        -> FocusView.swift 关注的用户菜谱

5、TabViewPages 目录  -> UserCenter.swift 用户中心

                               -> Categorys.swift 菜谱分类

                               -> PostRecipe.swift 菜谱发布

                               -> Discuss.swift 讨论圈子

                               -> Index.swift 菜谱首页

                               -> MyMessage.swift 消息中心

6、MainPage.swift APP首页

import SwiftUI

struct MainPage: View {
    @State private var selectedTab = Tab.index //默认Tab选择
    //可用的Tab选项
    enum Tab: Int {
        case index, discuss, postrecipe, categorys,usercenter
    }
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                //首页
                Index().tabItem { tabbarItem(name: "首页", ico: "house.circle") }.tag(Tab.index)
                //讨论
                Discuss().tabItem { tabbarItem(name: "圈子", ico: "circles.hexagongrid.fill") }.tag(Tab.discuss)
                //菜谱发布
                PostRecipe().tabItem { tabbarItem(name: "发布", ico: "plus") }.tag(Tab.postrecipe)
                //消息中心
                Categorys().tabItem { tabbarItem(name: "分类", ico: "square.grid.3x3.middle.fill") }.tag(Tab.categorys)
                //用户中心
                UserCenter().tabItem { tabbarItem(name: "我的", ico: "person.crop.circle.fill") }.tag(Tab.usercenter)
            }
            .accentColor(.red)//设置TabBar图标与字体的颜色
            .onAppear() {
                UITabBar.appearance().barTintColor = .white //配置背影TabBar颜色
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())//在Ipad、Mac中保持与IOS一样的样式
    }
    //统一设计单个Tabbar的样式
    private func tabbarItem(name: String, ico: String) -> some View {
        VStack {
            Image(systemName: ico)
                .imageScale(.large)
            Text(name)
        }
    }
}

//预览
struct MainPage_Previews: PreviewProvider {
    static var previews: some View {
        MainPage()
    }
}

 

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/158