[英]How to make a Calendar List in swiftUI?
大家好,我正在尝试在 swiftUI 中制作一个日历列表:
我想让 App 获取当前日期信息并将其显示在allDays list
的index 0
中,并根据订阅,App 在当前日期后自动生成 N Day
object。 即:365 为 1 年订阅。
最终结果现在看起来像这样,它是一个硬代码。
这是我的代码数据模型:
import SwiftUI
import Foundation
import Combine
struct Day : Identifiable {
var id = UUID()
var name : String
var date : String
var title : String
var color : Color
var month : String
var List : [Name?]
}
struct Name : Identifiable {
var id = UUID()
var name: String
var color: Color
}
class AppState : ObservableObject {
@Published var allDays : [Day] = [
Day(name: "Sunday", date: "20", title: "", color: .pink, month: "Jun", List: [
Name(id: UUID(), name: "John", color: .pink),
Name(id: UUID(), name: "Rose", color: .pink),
Name(id: UUID(), name: "Mike", color: .pink),
]),
Day(name: "Monday", date: "21", title: "", color: .yellow, month: "Jun", List: [
Name(id: UUID(), name: "Sara", color: .yellow),
Name(id: UUID(), name: "Jack",color: .yellow),
]),
Day(name: "Tuesday", date: "22", title: "", color: .blue, month: "Jun", List: [
Name(id: UUID(), name: "Rachel",color: .blue),
]),
Day(name: "Wednesday", date: "23", title: "", color: .green, month: "Jun", List: []),
Day(name: "Thursday", date: "24", title: "", color: .orange, month: "Jun", List: []),
Day(name: "Friday", date: "25", title: "", color: .purple, month: "Jun", List: []),
Day(name: "Saturday", date: "26", title: "", color: .red, month: "Jun", List: []),
]
}
和视图:
import SwiftUI
struct CalendarList: View {
@EnvironmentObject var appState : AppState
var body: some View {
NavigationView {
List {
ForEach(appState.allDays.indices, id:\.self) { index in
NavigationLink(destination: Text(appState.allDays[index].name) ) {
HStack(alignment: .top) {
RoundedRectangle(cornerRadius: 23)
.frame(width: 74, height: 74)
.foregroundColor(Color.blue)
.overlay(
VStack {
Text(appState.allDays[index].date)
.font(.system(size: 35, weight: .regular))
.foregroundColor(.white)
Text(appState.allDays[index].month)
.foregroundColor(.white)
}
)
.padding(.trailing ,4)
VStack(alignment: .leading, spacing: 5) {
Text(appState.allDays[index].name)
.font(.system(size: 20, weight: .semibold))
Text(appState.allDays[index].title)
.font(.subheadline)
.foregroundColor(Color(#colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)))
}
}
.padding(.vertical ,6)
}
}
}
.navigationTitle("Calendar")
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct CalendarList_Previews: PreviewProvider {
static var previews: some View {
CalendarList()
}
}
您可以使用几个DateFormatter
和Calendar
方法生成Day
模型:
extension Date {
func dayOfWeek(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "EEEE"
return dateFormatter.string(from: self).capitalized
}
func nameOfMonth(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "LLLL"
return dateFormatter.string(from: self).capitalized
}
}
func getDays(number: Int) -> [Day] {
let today = Date()
let formatter = DateFormatter()
return (0..<number).map { index -> Day in
let date = Calendar.current.date(byAdding: .day, value: index, to: today) ?? Date()
return Day(name: date.dayOfWeek(withFormatter: formatter) ?? "", date: "\(Calendar.current.component(.day, from: date))", month: date.nameOfMonth(withFormatter: formatter) ?? "")
}
}
更新,由于评论。 完整示例:
struct Day : Identifiable {
var id = UUID()
var name : String
var date : String
var title : String
var color : Color
var month : String
var List : [Name?]
}
struct Name : Identifiable {
var id = UUID()
var name: String
var color: Color
}
class AppState : ObservableObject {
@Published var allDays : [Day] = []
func generateDays(number: Int){
let today = Date()
let formatter = DateFormatter()
self.allDays = (0..<number).map { index -> Day in
let date = Calendar.current.date(byAdding: .day, value: index, to: today) ?? Date()
return Day(name: date.dayOfWeek(withFormatter: formatter) ?? "", date: "\(Calendar.current.component(.day, from: date))", title: "", color: .red, month: date.nameOfMonth(withFormatter: formatter) ?? "", List: [])
}
}
}
extension Date {
func dayOfWeek(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "EEEE"
return dateFormatter.string(from: self).capitalized
}
func nameOfMonth(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "LLLL"
return dateFormatter.string(from: self).capitalized
}
}
struct CalendarList: View {
@EnvironmentObject var appState : AppState
var body: some View {
NavigationView {
List {
ForEach(appState.allDays.indices, id:\.self) { index in
NavigationLink(destination: Text(appState.allDays[index].name) ) {
HStack(alignment: .top) {
RoundedRectangle(cornerRadius: 23)
.frame(width: 74, height: 74)
.foregroundColor(Color.blue)
.overlay(
VStack {
Text(appState.allDays[index].date)
.font(.system(size: 35, weight: .regular))
.foregroundColor(.white)
Text(appState.allDays[index].month)
.foregroundColor(.white)
}
)
.padding(.trailing ,4)
VStack(alignment: .leading, spacing: 5) {
Text(appState.allDays[index].name)
.font(.system(size: 20, weight: .semibold))
Text(appState.allDays[index].title)
.font(.subheadline)
.foregroundColor(Color(#colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)))
}
}
.padding(.vertical ,6)
}
}
}
.navigationTitle("Calendar")
.onAppear {
appState.generateDays(number: 365)
}
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
这与您的问题无关,但我个人也会选择使用ForEach
直接访问Day
而无需通过indices
:
ForEach(appState.allDays, id:\.id) { day in
NavigationLink(destination: Text(day.name) ) {
HStack(alignment: .top) {
RoundedRectangle(cornerRadius: 23)
.frame(width: 74, height: 74)
.foregroundColor(Color.blue)
.overlay(
VStack {
Text(day.date)
.font(.system(size: 35, weight: .regular))
.foregroundColor(.white)
Text(day.month)
.foregroundColor(.white)
}
)
.padding(.trailing ,4)
VStack(alignment: .leading, spacing: 5) {
Text(day.name)
.font(.system(size: 20, weight: .semibold))
Text(day.title)
.font(.subheadline)
.foregroundColor(Color(#colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)))
}
}
.padding(.vertical ,6)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.