I wanted to make a RoundedRectangle that shows all the information and under it, there's a list of data.
The goal was, to make it look like a card, but when I change the background, it leaves a weird white gap, where it doesn't change the color. I already tried to change the background color, foreground color, accent color and everything I know for every single layer but I can't find the problem...
I made the RoundedRectangle .background green in this case, to make it more obvious.
Picture of the app, arrows are edited!
```var body: some View {
NavigationView {
VStack(alignment: .center) {
ZStack {
RoundedRectangle(cornerRadius: 25)
.padding()
.foregroundColor(.white)
.background(Color.green)
.frame(width: nil, height: 250)
VStack {
Text("Verfügbar")
.foregroundColor(.gray)
.italic()
.font(.title2)
Text("\(totalMoneyToday(), specifier: "%.2f")€")
.foregroundColor(.blue)
.bold()
.font(.largeTitle)
HStack {
Spacer()
VStack(alignment: .leading) {
Text("Einkommen")
.foregroundColor(.gray)
.italic()
HStack {
Label("", systemImage: "arrow.up.circle")
.foregroundColor(.green)
Text("\(posMoney(), specifier: "%.2f")€").bold()
}
}
Spacer()
VStack(alignment: .trailing) {
Text("Ausgaben")
.foregroundColor(.gray)
.italic()
HStack {
Label("", systemImage: "arrow.down.circle")
.foregroundColor(.red)
Text("\(negMoney(), specifier: "%.2f")€").bold()
}
}
Spacer()
}
.padding(5)
}
}.background(Color.red)
List {
ForEach(money) { money in
NavigationLink(destination: EditMoneyView(money: money)) {
HStack {
VStack(alignment: .leading, spacing: 6) {
Text(money.name!)
.bold()
Text("\(money.amount, specifier: "%.2f")") + Text("€")
}
Spacer()
Text("\(money.date!, style: .date)")
.foregroundColor(.gray)
.italic()
}
}
}
.onDelete(perform: deleteMoney)
}
}
.navigationBarTitle("Financist", displayMode: .inline)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button {
showingAddView.toggle()
} label: {
Label("Hinzufügen", systemImage: "plus.circle")
}
}
}
.sheet(isPresented: $showingAddView) {
AddMoneyView()
}
}
}```
Thank you so much guys!
I think it is just default spacing, make it zero
NavigationView {
VStack(alignment: .center, spacing: 0) { << here !!
It's your ZStack background.
var body: some View {
NavigationView {
VStack(alignment: .center) {
ZStack {
RoundedRectangle(cornerRadius: 25)
.padding()
.foregroundColor(.white)
.background(Color.green)
.frame(width: nil, height: 250)
VStack {
Text("Verfügbar")
.foregroundColor(.gray)
.italic()
.font(.title2)
Text("Money")
.foregroundColor(.blue)
.bold()
.font(.largeTitle)
HStack {
Spacer()
VStack(alignment: .leading) {
Text("Einkommen")
.foregroundColor(.gray)
.italic()
HStack {
Label("", systemImage: "arrow.up.circle")
.foregroundColor(.green)
Text("money").bold()
}
}
Spacer()
VStack(alignment: .trailing) {
Text("Ausgaben")
.foregroundColor(.gray)
.italic()
HStack {
Label("", systemImage: "arrow.down.circle")
.foregroundColor(.red)
Text("money").bold()
}
}
Spacer()
}
.padding(5)
}
}.background(Color.red)
List {
// ForEach(money) { money in
// NavigationLink(destination: EditMoneyView(money: money)) {
// HStack {
// VStack(alignment: .leading, spacing: 6) {
// Text(money.name!)
// .bold()
//
// Text("\(money.amount, specifier: "%.2f")") + Text("€")
// }
// Spacer()
// Text("\(money.date!, style: .date)")
// .foregroundColor(.gray)
// .italic()
// }
// }
// }
// .onDelete(perform: deleteMoney)
}
}
.navigationBarTitle("Financist", displayMode: .inline)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button {
// showingAddView.toggle()
print("DEBUG: Button")
} label: {
Label("Hinzufügen", systemImage: "plus.circle")
}
}
}
.background(.red) // added this
// .sheet(isPresented: $showingAddView) {
// AddMoneyView()
// }
}
}
Related
**
Hello everybody.
i applied the above indicator, but the image but i still see only about half screen. the bottom remains gray. I applied ".onAppear () {
UITableView.appearance (). BackgroundColor = UIColor.clear} "because I would like to have transparency and see the whole image below and leave only the part of the list highlighted, but under the list I have only the gray screen and not the image. Basically no transparencies are applied through .
'''
var body: some View {
NavigationView {
ZStack {
VStack { // DEFINISCO IL NEW TASK
VStack(spacing: 16) {
TextField("New Task", text: $task)
.padding()
.background(
Color(UIColor.systemGray6)
)
.cornerRadius(10)
Button(action: {
addItem()
}, label: {
Spacer()
Text("SAVE")
Spacer()
})
.disabled(isButtonDisabled)
.padding()
.font(.headline)
.foregroundColor(.white)
.background(isButtonDisabled ? Color.gray : Color.pink)
.cornerRadius(10)
} //: VSTACK
.padding()
List {
ForEach(items) { item in
VStack(alignment: .leading) {
Text(item.task ?? "")
.font(.headline)
.fontWeight(.bold)
Text("Item at \(item.timestamp!, formatter: itemFormatter)")
.font(.footnote)
.foregroundColor(.gray)
}
}
.onDelete(perform: deleteItems)
} //: LIST
.listStyle(InsetGroupedListStyle())
.shadow(color: Color(red: 0, green: 0, blue: 0,opacity: 0.3),
radius: 12)
.padding(.vertical, 0)
.frame(maxWidth: 640)
} //: VSTACK
} //: ZSTACK
.onAppear() {
UITableView.appearance().backgroundColor = UIColor.clear
}
.navigationTitle("Daily Tasks")
.navigationBarTitleDisplayMode(.large)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
EditButton()
}
} //: TOOLBAR
.background(
BackgroundImageView()
)
.background(
backgroundGradient.ignoresSafeArea(.all)
)
Text("Select an item")
} //: NAVIGATION VIEW
}
I have a tab bar with 2 TabItems, What I want is to have one of the tab item's view beeing transparant.
ZStack {
Color.clean
TabView {
if #available(iOS 15.0, *) {
HomeView()
.tabItem {
Label("Home", systemImage: "person.crop.circle")
}
} else {
// Fallback on earlier versions
}
PatientView()
.tabItem {
Label("Patient", systemImage: "heart.text.square.fill")
}
}
}
I have tried to add an EmptyView() but i didn't get the desired result. HomeView should be transparent but also having 2 buttons displayed.
struct HomeView: View {
var body: some View {
if showLoadingSpinner {
ZStack {
Color.backgroundColor.edgesIgnoringSafeArea(.all)
ProgressView("Loading Avatar")
.progressViewStyle(CircularProgressViewStyle(tint: Color.brandPrimary))
}
.onAppear{
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
showLoadingSpinner = false
}
}
}
else {
GeometryReader { geometry in
ZStack {
VStack {
CreateZipMetadataView()
}
.frame(maxHeight: .infinity, alignment: .top)
.padding(.leading, UIScreen.screenWidth/2 - (geometry.size.width/7)/2)
EmptyView()
.frame(maxHeight: .infinity)
ZStack {
Circle()
.foregroundColor(.white)
.frame(width: geometry.size.width/7, height: geometry.size.width/7)
.padding(.leading, UIScreen.screenWidth/2 - (geometry.size.width/7)/2)
.frame(maxHeight: .infinity, alignment: .bottom)
}
}
}
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
My project was using a List but I needed a ScrollView wrapped view so I changed the List to just a ForEach loop with a view and Divider in between. I noticed my Context Menu doesn't look the same as when it was in the List as in the screenshot below.
I'd like the item selected with context menu to look like the List item selected since I can no longer use List in the code, it doesn't look as pretty. Also I have to press on the image and or text to open the Context Menu unlike in a List you can select the row. The end result would be to mimic the style of the selected List item.
/// Context Menu looks terrible
VStack (alignment: .leading, spacing: 0){
ForEach(self.welcome.views.dropLast(), id: \.id) { view in
ForEach(view.views ?? [], id: \.id) { purple in
ForEach(purple.views, id: \.id) { fluffy in
VStack (alignment: .leading, spacing: 0){
if viewClass == "FeaturedHeaderView" {
Text(title)
.font(.title3)
.fontWeight(.bold)
} else {
HStack (spacing: 15){
RequestImage(Url(image), animation: nil)
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60)
.clipped()
.cornerRadius(13.5)
VStack (alignment: .leading){
Text(name)
.font(.headline)
.fontWeight(.bold)
Text(author)
.foregroundColor(Color.secondary)
.font(.footnote)
Text(repo)
.foregroundColor(Color.secondary)
.font(.caption)
}
}
.contextMenu(ContextMenu(menuItems: {
HStack {
Button(action: {
openURL(URL(string: "URL")!)
}) {
Label("Open in Safari", systemImage: "safari.fill")
}
}
}))
}
}
Divider()
}
}
}
.padding(.all, 5)
.padding(.leading, 5)
}
/// List Context Menu looks great but can't use List in ScrollView
List {
ForEach(self.welcome.views.dropLast(), id: \.id) { view in
ForEach(view.views ?? [], id: \.id) { purple in
ForEach(purple.views.dropLast(), id: \.id) { fluffy in
VStack (alignment: .leading, spacing: 0){
if viewClass == "FeaturedHeaderView" {
Text(title)
.font(.title3)
.fontWeight(.bold)
} else {
HStack (spacing: 15){
RequestImage(Url(image), animation: nil)
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60)
.clipped()
.cornerRadius(13.5)
VStack (alignment: .leading){
Text(name)
.font(.headline)
.fontWeight(.bold)
Text(author)
.foregroundColor(Color.secondary)
.font(.footnote)
Text(repo)
.foregroundColor(Color.secondary)
.font(.caption)
}
}
.contextMenu(ContextMenu(menuItems: {
HStack {
Button(action: {
openURL(URL(string: "URL")!)
}) {
Label("Open in Safari", systemImage: "safari.fill")
}
}
}))
}
}
}
}
}
.padding(.all, 10)
.listRowInsets(EdgeInsets())
}
The possible solution is to add background modifier above contextMenu, like
.frame(maxWidth: .infinity) // << to make it screen-wide
.background(
RoundedRectangle(cornerRadius: 12) // << tune as needed
.fill(Color(UIColor.systemBackground)) // << fill with system color
)
.contextMenu(ContextMenu(menuItems: {
Demo with some replication (used Xcode 12.4 / iOS 14.4)
As the picture shows, I want the button to be in the bottom right corner.
https://i.imgur.com/GiVor8a.png
var body: some View {
ZStack {
HStack {
Color.black
}
Button(action: {}) {
HStack {
Image(systemName: "rectangle.grid.1x2.fill")
}
.padding()
.background(Color.yellow)
.mask(Circle())
}.frame(width: 60, height: 60)
.border(Color.red, width: 1)
}
}
You can use Spacer() for that,
Here is Your Code :
ZStack {
HStack {
Color.black
}
VStack(alignment:.trailing) {
Spacer()
HStack {
Spacer()
Button(action: {}) {
HStack {
Image(systemName: "rectangle.grid.1x2.fill")
}
.padding()
.background(Color.yellow)
.mask(Circle())
}.frame(width: 60, height: 60)
.border(Color.red, width: 1)
}
}
}