I am trying to place this information underneath my list. I don't want it to be included in the list but rather it should be displayed on the view background. Sort of like the old settings in iOS 6. I've tried placing my code snippets in different spots and removing stacks snd even changing what stacks I'm using and I cant figure it out. Heres my code and I attached a screenshot https://i.stack.imgur.com/PcUgJ.png for reference. Thank you to anyone who can help my noob self.
My Code:
import SwiftUI
struct SettingsAboutView: View {
var body: some View {
List{
//Top Section
Section {
HStack(spacing: 30) {
Spacer()
ZStack {
Rectangle()
.frame(width: 50, height: 50)
.clipShape(Rectangle())
.shadow(radius: 2)
.foregroundColor(Color("PineGlade"))
Image(systemName: "leaf.arrow.circlepath")
.resizable()
.frame(width: 25, height: 25)
.clipShape(Rectangle())
.foregroundColor(.white)
}.cornerRadius(10)
VStack(alignment: .leading) {
Text("Gardn")
.font(.system(size: 32))
.fontWeight(.bold)
.foregroundColor(Color("ShipsOfficer"))
Text("OnlyOdds.co Labs")
.font(.system(size: 13))
.fontWeight(.medium)
.foregroundColor(Color("ShipsOfficer"))
}
Spacer()
}.padding()
NavigationLink(destination: SettingsPrivacyView()) {
Button(action: {
print("Privacy Settings")
}) {
SettingsCell(title: "Privacy", imgName: "eye.slash", clr: Color("PineGlade"))
}
}
NavigationLink(destination: SettingsNotificationsView()) {
Button(action: {
print("Notification Settings")
}) {
SettingsCell(title: "Notifications", imgName: "bell", clr: Color("PineGlade"))
}
}
}
//Technical Info
HStack(spacing: 62) {
Spacer()
Text("V \(UIApplication.appVersion!)")
.font(.system(size: 14))
.fontWeight(.light)
.foregroundColor(Color("ShipsOfficer"))
.opacity(0.5)
Text("Build \(UIApplication.appBuild!)")
.font(.system(size: 14))
.fontWeight(.light)
.foregroundColor(Color("ShipsOfficer"))
.opacity(0.5)
Spacer()
}
}.listStyle(GroupedListStyle())
.environment(\.horizontalSizeClass, .regular)
.navigationBarTitle("Settings", displayMode: .inline)
}
}
struct SettingsAboutView_Previews: PreviewProvider {
static var previews: some View {
SettingsAboutView()
}
}
extension UIApplication {
static var appVersion: String? {
return Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String
}
}
extension UIApplication {
static var appBuild: String? {
return Bundle.main.object(forInfoDictionaryKey: "CFBundleVersion") as? String
}
}
What you are looking for is a Footer. The Section View takes Footer as ViewBuilder as argument.
Section(footer: Text("Your footer text")) {
//Your Content here
}
You can pass Text() or create your own custom view.
Just put the List in a VStack and put
Text(yourtext)
Under the list
Related
Does anyone know how to make the following view in SwiftUI?
HStack:
[ blank logo(centered) Skip(text)]
So I have the following HStack:
Zstack(alignment: .topLeading) {
VStack{
HStack {
Image("onboarding-logo")
.resizable()
.scaledToFit()
.frame(width: 150.0, height: 150.0)
.padding(.top, 35)
}
}
}
Does anyone know how I can have a "Skip" text in the top right corner of the screen, but also keep my logo centered and not have anything on the left side? I've tried Spacers and all, but I'm having no luck.
I would like to click "Skip" and then lead to another view.
There are many ways to achieve this. Here I have used LazyVGrid since other answers based on Stacks
struct ContentView: View {
var body: some View {
VStack {
LazyVGrid(columns: [GridItem(), GridItem(), GridItem()], content: {
Spacer()
Image(systemName: "star.fill")
.frame(width: 150, height: 150, alignment: .center)
.border(.gray)
Button(action: {
}, label: {
Text("Skip")
})
})
.border(.gray)
Spacer()
}
}
}
Is this the screen configuration you want?
The Zstack is used to center the Hstack into which the image is placed, and the new HStack uses a spacer to move the Text to the right.
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
VStack {
HStack(alignment: .center) {
Image("farnsworth")
.resizable()
.scaledToFit()
.frame(width: 150.0, height: 150.0)
}
Spacer()
}
VStack {
HStack {
Spacer()
Button {
// do Something...
} label: {
Text("Skip>>")
.padding(.top, 10)
}
}
Spacer()
}
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I'm trying to align a row in a list but can't work out the order that I need to place items in to get the desired results.
My current code is
HStack {
Image(imageName ?? "")
.renderingMode(.original)
.resizable()
.scaledToFit()
.frame(height: 72.0)
Text("**1**")
VStack {
Text("2")
Text("3")
Text("4")
}
VStack {
Text("5")
Text("6")
}
}
Currently this is giving me the below layout
But I'm trying to make it look like this
This is what you need:
struct ContentView: View {
var body: some View {
List {
HStack(spacing: 20.0) {
Image(systemName: "swift")
.resizable()
.scaledToFit()
.frame(height: 72.0)
VStack(alignment: .leading) {
Text("Name")
.bold()
HStack(alignment: .top) {
VStack {
Text("2")
Text("3")
Text("4")
}
VStack {
Text("5")
Text("6")
}
}
}
}
}
}
}
You just need more stacks to wrap things, like
HStack {
Image("picture")
.renderingMode(.original)
.resizable()
.scaledToFit()
.frame(height: 72.0)
VStack(alignment: .leading) { // << here !!
Text("Name").bold()
HStack(alignment: .top) { // << here !!
VStack {
Text("2")
Text("3")
Text("4")
}
VStack {
Text("5")
Text("6")
}
}
}
}
Tested with Xcode 14 / iOS 16
When I put an image on screen, I expect the image to be entirely enclosed in its own frame, but apparently I am wrong. Does anyone know why? Thanks.
My Code:
struct ContentView: View {
var body: some View {
HStack {
Group {
Image(systemName: "envelope.badge.fill")
Image(systemName: "moon.stars.fill")
} // Group
.foregroundColor(.yellow)
.font(.system(size: 128))
.border(Color.red)
} // VStack
.padding(40)
.background(Color.white)
}
}
Result:
This appears to be a bug that is now fixed in SwiftUI 2.0 (Xcode 12).
Here is a workaround for SwiftUI 1.0 (Xcode 11). It uses UIImage(systemName:) to get the actual dimensions of the image, and then uses .aspectRatio(_:contentMode:) to set the correct aspect ratio.
struct SystemImage: View {
let name: String
var body: some View {
let uiImage = UIImage(systemName: name)!
return Image(systemName: name)
.resizable()
.aspectRatio(uiImage.size, contentMode: .fit)
}
}
struct ContentView: View {
var body: some View {
HStack {
Group {
SystemImage(name: "envelope.badge.fill")
SystemImage(name: "moon.stars.fill")
} // Group
.foregroundColor(.yellow)
.font(.system(size: 128))
.border(Color.red)
} // VStack
.padding(40)
.background(Color.white)
}
}
Try placing the padding before the border.
edit...
Does this help:
HStack {
Group {
Image(systemName: "envelope.badge.fill")
Image(systemName: "moon.stars.fill")
} // Group
.foregroundColor(.yellow)
.font(.system(size: 128))
.frame(width:150, height: 150, alignment: .center)
.padding(10)
.border(Color.red)
} // VStack
.padding(40)
.background(Color.white)
public struct Frontside: View
{
#Binding public var kanatext: String
public var body: some View
{
ZStack{
RoundedRectangle(cornerRadius: 25, style: .continuous)
.foregroundColor(Color.red)
.frame(width: 160, height: 160)
.zIndex(0)
Text(self.kanatext)
.font(.title)
.fontWeight(.black)
.padding(50)
.zIndex(1)
VStack {
Spacer()
HStack {
Button(action: {
print("button pressed")
}) {
Image(systemName: "xmark.circle")
.font(.title)
}
.mask(Circle())
.opacity(0.4)
Button(action: {
print("button pressed")
}) {
Image(systemName: "checkmark.circle")
.font(.title)
}
.mask(Circle())
.opacity(0.4)
}
}
.zIndex(2)
}
}
}
In the above code snippet, I have used a Zstack to layer different parts of a flash card, a background, the text, and then correct/incorrect buttons. The uppermost layer are the buttons, which appear correctly, but for some reason they are not actually pressable.
Have you tried using onTapGesture? It might have to do with the fact that you're using a ZStack.
Try something like:
Image(systemName: "checkmark.circle")
.font(.title)
.onTapGesture {
print("button pressed")
}
In this case there would be no needed to wrap the Image in a Button.
If this doesn't work add onTapGesture to your VStack and have it be empty.
I hope to make a list just like to-do list, the cell has a checkbox and Text. And I want when list cell selected, the view could be translate to detailView. Meanwhile I also could select the checkbox, but don't trigger the view translate to the detailView.
I removed the List{}, the code run ok, but the List property and method can't use any more. So I plan to code a customer list view. But I don't think it will be the good method. So if I still can't find a good way to make it, I may implement in this way at last.
NavigationView {
VStack {
List {
ForEach(todayDietModel.todayDietItems) { item in
NavigationLink(destination: DietItemDetailView()) {
TodayDietRow(todayDietItem: item)
.animation(.spring())
}
}
}
}
.frame(width: 352, height: 400)
.background(Color.white)
.cornerRadius(16)
}
struct TodayDietRow: View {
#State var isFinished: Bool = false
var body: some View {
HStack(spacing: 20.0) {
Button(action: {self.isFinished.toggle()}) {
if self.isFinished {
Image("icon_checked_s001")
.resizable()
.renderingMode(.original)
.aspectRatio(contentMode: .fit)
.frame(width: 24, height: 24)
} else {
Image("icon_unchecked_s001")
.resizable()
.frame(width: 24, height: 24)
}
}
.padding(.leading, 10)
Text("DietName")
.font(.system(size:13))
.fontWeight(.medium)
.foregroundColor(Color.black)
}
.frame(width: 327, height: 48)
}
}
This works quite well with a gesture on the checkbox image. Two Buttons didn't work since every tap went to both buttons.
struct TodayTodoView2: View {
#ObservedObject var todayDietModel = TodayDietModel()
func image(for state: Bool) -> Image {
return state ? Image(systemName: "checkmark.circle") : Image(systemName: "circle")
}
var body: some View {
NavigationView {
VStack {
List {
ForEach($todayDietModel.todayDietItems) { (item: Binding<TodayDietItem>) in
HStack{
self.image(for: item.value.isFinished).onTapGesture {
item.value.isFinished.toggle()
}
NavigationLink(destination: DietItemDetailView2(item: item)) {
Text("DietNamee \(item.value.dietName)")
.font(.system(size:13))
.fontWeight(.medium)
.foregroundColor(Color.black)
}
}
}
}
.background(Color.white)
}
}
}
}