SwiftUI Blog Post and Detail Post
ContentView.swift
//
// ContentView.swift
// Test
//
// Created by Cairocoders
//
import SwiftUI
struct ContentView: View {
//var posts:[Post]
@State var search = ""
@State var columns = Array(repeating: GridItem(.flexible(), spacing: 15), count: 2)
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
LazyVStack{
HStack{
Text("Blog Post")
.font(.title)
.fontWeight(.bold)
Spacer()
Button {
withAnimation(.easeOut){
if self.columns.count == 2{
self.columns.removeLast()
}
else{
self.columns.append(GridItem(.flexible(), spacing: 15))
}
}
} label: {
Image(systemName: self.columns.count == 2 ? "rectangle.grid.1x2" : "square.grid.2x2")
.font(.system(size: 24))
.foregroundColor(.black)
}
}
.padding(.horizontal)
TextField("Search", text: self.$search)
.padding(.vertical,10)
.padding(.horizontal)
.background(Color.black.opacity(0.07))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top,25)
VStack {
Text("There are \(posts.count) posts")
.font(.title3)
.multilineTextAlignment(.leading)
LazyVGrid(columns: self.columns,spacing: 25){
ForEach(posts) { post in
PostView(postsview: post, columns: self.$columns, setid: post.userId)
}
}
.padding([.horizontal,.top])
}
}//End LazyStack
}
}
}
struct PostView: View {
let postsview: Post
@Binding var columns : [GridItem]
@Namespace var namespace
@State var show = false
@State var setid: Int
var body: some View {
VStack(spacing: 15){
ZStack(alignment: Alignment(horizontal: .trailing, vertical: .top)) {
Image(postsview.postimage)
.resizable()
.frame(height: 250)
.cornerRadius(15)
Button {
} label: {
Image(systemName: "heart.fill")
.foregroundColor(.red)
.padding(.all,10)
.background(Color.white)
.clipShape(Circle())
}
.padding(.all,10)
}
.matchedGeometryEffect(id: "image", in: self.namespace)
Text(postsview.title)
.fontWeight(.bold)
.lineLimit(1)
.matchedGeometryEffect(id: "title", in: self.namespace)
Button {
setid = (postsview.userId)
show.toggle()
} label: {
Text("Learn More")
.foregroundColor(.white)
.padding(.vertical,10)
.padding(.horizontal,25)
.background(Color.green)
.cornerRadius(5)
}
.matchedGeometryEffect(id: "learnmore", in: self.namespace)
.sheet(isPresented: $show, content: {
Details(setid: setid, data: postsview)
})
}//End VStack
.onAppear {
print("onAppear post = \(postsview.id) \(postsview.userId)")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Details.swift
//
// Details.swift
// Test
//
// Created by Cairocoders
//
import SwiftUI
struct Details: View {
var setid: Int
var data : Post
var body: some View {
//Text("\(setid)")
//Text(data.title)
ScrollView {
VStack {
Image(data.postimage)
.resizable()
.aspectRatio(contentMode: .fill)
.clipped()
}
.frame(height: 400)
VStack(alignment: .leading) {
HStack {
Image("photo1")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 60, height: 60)
.clipped()
.cornerRadius(10)
VStack(alignment: .leading) {
Text("Article by")
.font(.title3)
.foregroundColor(.gray)
Text("Cairocoders")
.font(.title3)
}
}
.padding(.top, 20)
Text(data.title)
.font(.largeTitle)
.lineLimit(nil)
.padding(.top, 10)
Text("23 min read • 22. July 2020")
.font(.title3)
.foregroundColor(.gray)
.padding(.top, 10)
Text(data.body)
.font(.title2)
.lineLimit(nil)
.padding(.top, 30)
}//End VStack
.frame(width: 350)
}
.edgesIgnoringSafeArea(.top)
}
}
struct Details_Previews: PreviewProvider {
static var previews: some View {
Details(setid: 1, data: Post(userId: 1, title: "Sample Title", body: "Sample Body", postimage: "post1"))
}
}
Model.swift
//
// Model.swift
// Test
//
// Created by Cairocoders
//
import Foundation
struct Post: Identifiable {
let id = UUID()
let userId: Int
let title: String
let body: String
let postimage: String
}
let posts: [Post] = [
Post(
userId: 1,
title: "How to easily share tweets to Instagram Stories in iOS",
body: "Twitter rolled out an update to its iOS app earlier this week that lets users quickly and easily share tweets to their Instagram Stories. It’s now nearly a one-click operation, but not quite.",
postimage: "post1"),
Post(
userId: 2,
title: "Hands on: Safari in iOS 15 takes some getting used to, but it’s worth it",
body: "The most controversial change in iOS 15 — moving Safari’s Address Bar to the bottom of the screen — doesn’t deserve the deluge of criticism some users are heaping upon it. I tried out the latest iOS 15 beta to check out that feature, plus the new Tab Groups and other changes coming to Safari. Here’s what I like and what I don’t.",
postimage: "post2"),
Post(
userId: 3,
title: "Sonic the Hedgehog speeds onto Minecraft to celebrate 30th birthday",
body: "It’s somehow been 30 years since Sega’s rapid blue hedgehog mascot, Sonic, first speeded his way onto the Genesis and into video game history on June 23, 1991.",
postimage: "post3"),
Post(
userId: 4,
title: "Boring iOS 15 shows just how far iPhone has come",
body: "iOS 15 is kind of boring. It brings some welcome new features, but nothing that will change the way you use your iPhone forever.",
postimage: "post4"),
Post(
userId: 5,
title: "How to easily share tweets to Instagram Stories in iOS",
body: "Twitter rolled out an update to its iOS app earlier this week that lets users quickly and easily share tweets to their Instagram Stories. It’s now nearly a one-click operation, but not quite.",
postimage: "post1"),
Post(
userId: 6,
title: "Hands on: Safari in iOS 15 takes some getting used to, but it’s worth it",
body: "The most controversial change in iOS 15 — moving Safari’s Address Bar to the bottom of the screen — doesn’t deserve the deluge of criticism some users are heaping upon it. I tried out the latest iOS 15 beta to check out that feature, plus the new Tab Groups and other changes coming to Safari. Here’s what I like and what I don’t.",
postimage: "post2"),
Post(
userId: 7,
title: "Sonic the Hedgehog speeds onto Minecraft to celebrate 30th birthday",
body: "It’s somehow been 30 years since Sega’s rapid blue hedgehog mascot, Sonic, first speeded his way onto the Genesis and into video game history on June 23, 1991.",
postimage: "post3"),
Post(
userId: 8,
title: "Hands on: Safari in iOS 15 takes some getting used to, but it’s worth it",
body: "The most controversial change in iOS 15 — moving Safari’s Address Bar to the bottom of the screen — doesn’t deserve the deluge of criticism some users are heaping upon it. I tried out the latest iOS 15 beta to check out that feature, plus the new Tab Groups and other changes coming to Safari. Here’s what I like and what I don’t.",
postimage: "post2"),
Post(
userId: 9,
title: "How to easily share tweets to Instagram Stories in iOS",
body: "Twitter rolled out an update to its iOS app earlier this week that lets users quickly and easily share tweets to their Instagram Stories. It’s now nearly a one-click operation, but not quite.",
postimage: "post1")
]
