Whats New SwiftUI iOS16

NavigationStack

NavigationView删除后的替代方法

        NavigationStack {
            List(1..<50) { i in
                NavigationLink {
                    Text("Detail \(i)")
                } label: {
                    Label("Row \(i)", systemImage: "\(i).circle")
                }
            }
            .navigationTitle("Navigation")
        }

        NavigationStack {
            List(1..<50) { i in
                NavigationLink(value: i) {
                    Label("Row \(i)", systemImage: "\(i).circle")
                }
            }
            .navigationDestination(for: Int.self, destination: { i in
                Text("Detail \(i)")
            })
            .navigationTitle("Navigation")
        }

struct ContentView: View {
    @State private var persentedNumbers = [2, 3, 5]
    var body: some View {
        NavigationStack(path: $persentedNumbers) {
            List(1..<50) { i in
                NavigationLink(value: i) {
                    Label("Row \(i)", systemImage: "\(i).circle")
                }
            }
            .navigationDestination(for: Int.self, destination: { i in
                Text("Detail \(i)")
            })
            .navigationTitle("Navigation")
        }
    }
}

struct ContentView: View {
    @State private var persentedNumbers = NavigationPath()
    var body: some View {
        NavigationStack(path: $persentedNumbers) {
            NavigationLink(value: "Example String") {
                Text("Tap Me")
            }
            List(1..<50) { i in
                NavigationLink(value: i) {
                    Label("Row \(i)", systemImage: "\(i).circle")
                }
            }
            .navigationDestination(for: Int.self, destination: { i in
                Text("Detail \(i)")
            })
            .navigationDestination(for: String.self, destination: { s in
                Text("String is: \(s)")
            })
            .navigationTitle("Navigation")
        }
    }
}

struct ContentView: View {
    @State private var players = ["Sinduke", "Jianshu", "Tom"]
    @State private var selectedPlayer: String?
    var body: some View {
        NavigationSplitView {
            List(players, id: \.self, selection: $selectedPlayer, rowContent: Text.init)
        } detail: {
            Text(selectedPlayer ?? "Please choose a player")
        }
    }
}

struct Team: Identifiable, Hashable {
    let id = UUID()
    var name: String
    var players: [String]
}

struct ContentView: View {
    @State private var teams = [
        Team(name: "SKT T1", players: ["Faker", "Gumayusi", "Zeus", "Oner", "Keria"])
    ]
    @State private var selectedTeam: Team?
    @State private var selectedPlayer: String?
    var body: some View {
        NavigationSplitView {
            List(teams, selection: $selectedTeam) { team in
                Text(team.name).tag(team)
            }
            .navigationSplitViewColumnWidth(250)
        } content: {
            List(selectedTeam?.players ?? [], id: \.self, selection: $selectedPlayer, rowContent: Text.init)
        } detail: {
            Text(selectedPlayer ?? "Please choose a player")
        }
        .navigationSplitViewStyle(.prominentDetail)
    }
}

Sheet

struct ContentView: View {
    @State private var showingCredits = false
    var body: some View {
        Button("Show Credits") {
            showingCredits.toggle()
        }
        .sheet(isPresented: $showingCredits) {
            Text("This is Credits Content, This is Credits Content")
//                .presentationDetents([.height(300)])
//                .presentationDetents([.medium, .large])
//                .presentationDragIndicator(.hidden)
                .presentationDetents([.fraction(0.5)])
        }
    }
}

Grid

struct ContentView: View {
    var body: some View {
        Grid{
            GridRow {
                Text("Top Leading")
                    .padding()
                    .background(.red)
                Text("Top Trailing")
                    .padding()
                    .background(.orange)
            }
            GridRow {
                Text("Bottom Leading")
                    .padding()
                    .background(.blue)
                Text("Bottom Trailing")
                    .padding()
                    .background(.green)
            }
        }
    }
}

struct ContentView: View {
    @State private var redScore = 0
    @State private var blueScore = 0
    var body: some View {
        Grid{
            GridRow {
                Text("Red")
                ForEach(0..<redScore, id: \.self) { _ in
                    Rectangle()
                        .fill(.red)
                        .frame(width: 20, height: 20)
                }
            }
            GridRow {
                Text("Blue")
                ForEach(0..<blueScore, id: \.self) { _ in
                    Rectangle()
                        .fill(.blue)
                        .frame(width: 20, height: 20)
                }
            }

            Button("Red Scored") { redScore += 1 }
            Button("Blue Scored") { blueScore += 1 }
        }
    }
}

struct ContentView: View {
    @State private var redScore = 0
    @State private var blueScore = 0
    var body: some View {
        Grid {
            GridRow {
                Text("Food")
                Text("$200")
            }
            GridRow {
                Text("Rent")
                Text("$800")
            }
            GridRow {
                Text("Candles")
                Text("$3600")
            }
            Divider()
            GridRow {
                Text("$4600")
                    .gridCellColumns(2)
                    .multilineTextAlignment(.trailing)
            }
        }
    }
}

OnTapGesture

struct ContentView: View {
    var body: some View {
        Circle()
            .fill(.red.gradient)
            .frame(width: 100, height: 100)
            .onTapGesture { location in
                debugPrint("Tapped at \(location)")
            }
    }
}

struct ContentView: View {
    var body: some View {
        Circle()
            .fill(.red.gradient)
            .frame(width: 100, height: 100)
            .onTapGesture(coordinateSpace: .global) { location in
                debugPrint("Tapped at \(location)")
            }
    }
}

分享链接

struct ContentView: View {
    var body: some View {
        let link = URL(string: "https://www.google.com")!
        VStack(spacing: 20.0) {
            ShareLink(item: link)
            ShareLink("Learn Swift here", item: link)
            ShareLink(item: link) {
                Label("Learn Swift here", systemImage: "swift")
            }
            ShareLink(item: link, subject: Text("Subject test"), message: Text("This is the world search site"))
        }
    }
}

struct ContentView: View {
    var body: some View {
        let link = URL(string: "https://www.google.com")!
        ShareLink(
            item: link,
            preview: SharePreview(
                "string here",
                image: Image(systemName: "plus")
            )
        
        )
    }
}

MultiDatePicker

struct ContentView: View {
    @State private var dates = Set<DateComponents>()
    @Environment(\.calendar) var calendar
    var body: some View {
        VStack(spacing: 12) {
            MultiDatePicker("Select your preferred dates", selection: $dates)
            Text(summary)
        }
        .padding()
    }
    
    var summary: String {
        dates.compactMap { components in
            calendar.date(from: components)?.formatted(date: .long, time: .omitted)
        }.formatted()
    }
}

struct ContentView: View {
    @State private var dates = Set<DateComponents>()
    @Environment(\.calendar) var calendar
    var body: some View {
        VStack(spacing: 12) {
            MultiDatePicker("Select your preferred dates", selection: $dates, in: Date.now...)
            Text(summary)
        }
        .padding()
    }
    
    var summary: String {
        dates.compactMap { components in
            calendar.date(from: components)?.formatted(date: .long, time: .omitted)
        }.formatted()
    }
}

可搜索范围(Searchable scopes)

struct Message: Identifiable, Codable {
    let id: Int
    var user: String
    var text: String
}

enum SearchScope: String, CaseIterable {
    case inbox, favorites
}

struct ContentView: View {
    @State private var messages = [Message]()
    @State private var searchText = ""
    @State private var searchScope = SearchScope.inbox
    @State var useTime: String = "1212"
    var body: some View {
        NavigationStack {
            List {
                ForEach(filteredMessages) { message in
                    VStack(alignment: .leading) {
                        Text(message.user)
                            .font(.headline)
                        Text(message.text)
                    }
                }
            }
            .searchable(text: $searchText)
            .searchScopes($searchScope) {
                ForEach(SearchScope.allCases, id: \.self) { scope in
                    Text(scope.rawValue.capitalized)
                }
            }
            .navigationTitle("Messages")
        }
        .onSubmit(of: .search, runSearch)
        .onChange(of: searchScope) { _ in
            runSearch()
        }
    }
    var filteredMessages: [Message] {
        if searchText.isEmpty {
            return messages
        } else {
            return messages.filter { $0.text.localizedCaseInsensitiveContains(searchText) }
        }
    }
    
    func runSearch() {
        Task {
            let startTime = CFAbsoluteTimeGetCurrent()
            guard let url = URL(string: "https://hws.dev/\(searchScope.rawValue).json") else { return }
            let (data, _) = try await URLSession.shared.data(from: url)
            messages = try JSONDecoder().decode([Message].self, from: data)
            let endTime = CFAbsoluteTimeGetCurrent()
            self.useTime = String(endTime - startTime)
            debugPrint(useTime)
        }
    }
}

Gradient

struct ContentView: View {
    let colors: [Color] = [.blue, .mint, .yellow, .green, .orange, .red, .purple, .indigo]
    var body: some View {
        VStack {
            ForEach(colors, id: \.self) { color in
                    Rectangle()
                        .fill(color.gradient)
            }
        }
    }
}

Shadow

struct ContentView: View {
    var body: some View {
        VStack {
            Circle()
                .fill(.mint.gradient.shadow(.drop(color: .black, radius: 20)))
            .padding()
            Circle()
                .fill(.mint.gradient.shadow(.inner(color: .black, radius: 20)))
            .padding()
        }
    }
}

AnyLayout

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    var body: some View {
        let layout = horizontalSizeClass == .regular ? AnyLayout(HStackLayout()) : AnyLayout(VStackLayout())
        layout {
            Image(systemName: "1.circle")
            Image(systemName: "2.circle")
            Image(systemName: "3.circle")
        }
        .font(.largeTitle)
    }
}

struct ContentView: View {
    @Environment(\.dynamicTypeSize) var dynamicTypeSize
    var body: some View {
        let layout = dynamicTypeSize <= .xxxLarge ? AnyLayout(HStackLayout()) : AnyLayout(VStackLayout())
        layout {
            Image(systemName: "1.circle")
            Image(systemName: "2.circle")
            Image(systemName: "3.circle")
        }
        .font(.largeTitle)
    }
}

requestReview

struct ContentView: View {
    @Environment(\.requestReview) var requestReview
    var body: some View {
        Button("Review the app") {
            requestReview()
        }
    }
}

keyboard

struct ContentView: View {
    @State private var username = "sinduke"
    @State private var bio = ""
    var body: some View {
        ScrollView {
            VStack {
                TextField("Username", text: $username)
                TextEditor(text: $bio)
                    .frame(height: 400)
                    .border(.quaternary, width: 1)
            }
            .padding(.horizontal)
        }
        .scrollDismissesKeyboard(.interactively)
    }
}

Hiding scroll indicators

struct ContentView: View {
    @State private var username = "sinduke"
    @State private var bio = ""
    var body: some View {
        ScrollView {
            VStack {
                TextField("Username", text: $username)
                TextEditor(text: $bio)
                    .frame(height: 400)
                    .border(.quaternary, width: 1)
            }
            .padding(.horizontal)
        }
        .scrollIndicators(.hidden)
    }
}

Hiding the home and multitasking indicators

struct ContentView: View {
    @State private var username = "sinduke"
    @State private var bio = ""
    var body: some View {
        ScrollView {
            VStack {
                TextField("Username", text: $username)
                TextEditor(text: $bio)
                    .frame(height: 400)
                    .border(.quaternary, width: 1)
            }
            .padding(.horizontal)
        }
        .persistentSystemOverlays(.hidden)
    }
}

Variable values for SF Symbols

struct ContentView: View {
    var body: some View {
        Image(systemName: "wifi", variableValue: 0.5)
            .font(.largeTitle)
    }
}

struct ContentView: View {
    @State private var value = 0.0
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "aqi.low", variableValue: value)
                Image(systemName: "wifi", variableValue: value)
                Image(systemName: "chart.bar.fill", variableValue: value)
                Image(systemName: "waveform", variableValue: value)
            }
            Slider(value: $value)
        }
        .font(.system(size: 62))
        .foregroundColor(.blue)
        .padding()
    }
}

Line limit

struct ContentView: View {
    var body: some View {
        Text("文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本")
            .lineLimit(3...6)
    }
}

Text animation

struct ContentView: View {
    @State private var useBlack = false
    var body: some View {
        Text("Hello world")
            .font(.largeTitle)
            .fontWeight(useBlack ? .black : .ultraLight)
            .onTapGesture {
                withAnimation {
                    useBlack.toggle()
                }
            }
    }
}

Automatic expanding text

struct ContentView: View {
    @State private var bio = ""
    var body: some View {
        TextField("Enter your bio", text: $bio, axis: .vertical)
            .textFieldStyle(.roundedBorder)
            .padding()
    }
}

struct ContentView: View {
    @State private var bio = ""
    var body: some View {
        TextField("Enter your bio", text: $bio, axis: .vertical)
            .textFieldStyle(.roundedBorder)
            .lineLimit(...5)
            .padding()
    }
}

Bold and Italic now take Booleans

struct ContentView: View {
    @State private var useBold = false
    @State private var useItalic = false
    var body: some View {
        VStack {
            Text("Welcome to SwiftUI 4.0")
                .bold(useBold)
                .italic(useItalic)
            Toggle("Use Bold", isOn: $useBold)
            Toggle("Use Italic", isOn: $useItalic)
        }
        .font(.largeTitle)
        .padding()
    }
}

Foreground color animation

struct ContentView: View {
    @State private var useRed = false
    var body: some View {
        Text("Welcome to SwiftUI")
            .font(.largeTitle.bold())
            .foregroundColor(useRed ? .red : .black)
            .onTapGesture {
                withAnimation {
                    useRed.toggle()
                }
            }
    }
}

Toggling an array of Booleans at once

struct EmailList: Hashable, Identifiable {
    var id: String
    var isSubscribed = false
}

struct ContentView: View {
    @State private var lists = [
        EmailList(id: "Monthly Updates", isSubscribed: true),
        EmailList(id: "NewsFlashes", isSubscribed: false),
        EmailList(id: "Spacial Offers", isSubscribed: true)
    ]
    var body: some View {
        Form {
            Section {
                ForEach($lists, id: \.id) { $list in
                    Toggle(list.id, isOn: $list.isSubscribed)
                }
            }
            Section {
                Toggle(sources: $lists, isOn: \.isSubscribed) {
                    Text("Subscribe to all")
                }
            }
        }
    }
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,692评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,482评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,995评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,223评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,245评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,208评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,091评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,929评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,346评论 1赞 311
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,437评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,037评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2赞 369
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2赞 354

推荐阅读更多精彩内容