I have the following view:
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack{
Color.green.edgesIgnoringSafeArea(.all)
VStack {
HStack{
Text("header leading")
Spacer()
Text("header trailing")
}
// this makes the unexpected gap somehow
.padding(.horizontal)
.frame(height: 60)
.background(Color.red)
VStack{
Text("body top")
Spacer()
Text("body bottom")
}
.background(Color.blue)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Why do I get this gap between the red HStack and the blue VStack? If I remove padding, the gap is gone.
For my understanding, the padding should only make in indent horizontally (leading and trailing). Why is this assumption wrong?
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack{
Color.green.edgesIgnoringSafeArea(.all)
VStack(spacing:0.0) {
HStack{
Text("header leading")
Spacer()
Text("header trailing")
}
// this makes the unexpected gap somehow
.padding(.horizontal)
.frame(height: 60)
.background(Color.red)
VStack{
Text("body top")
Spacer()
Text("body bottom")
}
.background(Color.blue)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
[screen capture in simulator iphone 8][1]
Related
htpA here!
I am a newbie of SwiftUI programming and I am just trying to add a navigation title for macOS like in iOS. I tried many things but it didn't seem to be working. I hope anyone would answer it quickly.
Here's my code
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
List {
Spacer()
NavigationLink(destination: LatestEpisodes()) {
Menu1()
}
.frame(minWidth: 110)
.frame(maxWidth: 110)
}
Text("Content")
}
.navigationTitle("Hello!")
.frame(minWidth: 900)
.listStyle(SidebarListStyle())
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Menu1: View {
var body: some View {
VStack {
Image(systemName: "1.circle.fill")
Text("Menu1")
}
.frame(width: 90, height: 90)
.padding(10)
}
}
I'm trying to hide the Back button above my Navigation title, But .navigationBarBackButtonHidden(true) isn't working, Is there any alternative way I can approach it to remove this back button and the space below it and my heading ?
import SwiftUI
struct ContentView: View {
init() {
let navBarAppearance = UINavigationBar.appearance()
navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.orange]
navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.orange]
}
#AppStorage("hasOpened") private var hasOpened : Bool = false
var body: some View {
NavigationView(){
VStack(alignment: .leading, spacing: 0) {
Text("Hello, World!")
.onAppear{
hasOpened = false
}
}
.navigationBarBackButtonHidden(true)
.padding()
.navigationBarTitle("Home")
.foregroundColor(Color("Orange"))
.navigationBarItems(trailing:
Image("Logo")
.resizable()
.scaledToFit()
.frame(width: 100.0,height:100)
.padding(.top, 75)
)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Output:
Curious how the following navigation bar can be achieved using SwiftUI, does a UI that mimics the looks of navigation bar need to made or is there a way to add an actual NavigationView?
I think yes? Consider the following code.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("Hello, world!")
.padding()
Spacer()
miniNavigationView
Spacer()
Text("Hello, world!")
.padding()
}
.background(.red)
}
var miniNavigationView: some View {
HStack {
NavigationView {
ScrollView {
VStack {
Text("Inside the mini Navigation View!")
}
}
.navigationTitle("Inside the mini Navigation view!")
}
}
.frame(width: 250, height: 250)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Gif of Result
I can't get this scrollview to align to the bottom in SwiftUI!
I've three items in the scrollview, but I want them to be aligned to the bottom of the screen (the red arrow shows where I WANT the items to be!)
Here is my code:
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
VStack {
ScrollView {
Spacer(minLength: 80)
Text("a")
Text("b")
Text("c")
}.frame(maxHeight: /*#START_MENU_TOKEN#*/.infinity/*#END_MENU_TOKEN#*/)
Text("Button")
.padding()
}.frame(alignment: .bottom)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I'm trying spacers, and rotating content by 180 degrees? What should I do?
GeometryReader to the rescue! First, wrap the ScrollView in a GeometryReader so you can get the scrolling area’s height. Then set that as the minimum height of the ScrollView’s content and use bottom alignment:
var body: some View {
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
VStack {
GeometryReader { geometry in
ScrollView {
VStack {
Text("a")
Text("b")
Text("c")
}
.frame(maxWidth: .infinity,
minHeight: geometry.size.height,
alignment: .bottom)
}
}
Text("Button")
.padding()
}
}
}
Goal:
1- Shows a view (Blue) that covers entire screen
2- When tapped on bottom (top right corner), it shows an HStack animating right side HStack (Green) "Slide Offset animation".
import SwiftUI
struct ContentView: View {
#State var showgreen = false
var body: some View {
NavigationView {
HStack {
Rectangle()
.foregroundColor(.blue)
if showgreen {
Rectangle()
.foregroundColor(.green)
.offset(x: showgreen ? 0 : UIScreen.main.bounds.width)
.animation(.easeInOut)
}
}
.navigationBarItems(trailing:
Button(action: { self.showgreen.toggle() }) {
Image(systemName: "ellipsis")
})
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.colorScheme(.dark)
.previewDevice("iPad Pro (12.9-inch) (3rd generation)")
}
}
The code works, however I cannot get the Green "Slide Offset animation" to work. Really appreciate any help! : )
Instead of using the if conditional, you need the green rectangle to be already present, and just offscreen. When showgreen toggles, you need to shrink the size of the blue rectangle, which will make room for the green rectangle.
struct ContentView: View {
#State var showgreen = false
var body: some View {
NavigationView {
HStack {
Rectangle()
.foregroundColor(.blue)
.frame(width: showgreen ? UIScreen.main.bounds.width / 2 : UIScreen.main.bounds.width)
.animation(.easeInOut)
Rectangle()
.foregroundColor(.green)
.animation(.easeInOut)
}
.navigationBarItems(trailing:
Button(action: { self.showgreen.toggle() }) {
Image(systemName: "ellipsis")
})
}
.navigationViewStyle(StackNavigationViewStyle())
}
}