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)
}
}
Related
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 have two views
import SwiftUI
import CoreData
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Image("qr-code")
.resizable()
.scaledToFit()
.position(x: 100, y: 100)
.offset(x: 100)
Text("Thank you")
.position(x: 200)
}.toolbar{
ToolbarItemGroup(placement: .bottomBar) {
NavigationLink(destination: ContentView().navigationBarBackButtonHidden(true)) {
Text("Show QR")
}
Spacer()
NavigationLink(destination: CustomizeView().navigationBarBackButtonHidden(true)) {
Text("Customize")
}
}
}
}
}
}
struct CustomizeView: View {
var body: some View {
List {
Section(header: Text("Important tasks")) {
Text("Task data goes here")
Text("Task data goes here")
}
}.toolbar{
ToolbarItemGroup(placement: .bottomBar) {
NavigationLink(destination: ContentView().navigationBarBackButtonHidden(true)) {
Text("Show QR")
}
Spacer()
NavigationLink(destination: CustomizeView().navigationBarBackButtonHidden(true)) {
Text("Customize")
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
CustomizeView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
}
}
}
When I click on Customize and the click on Show, I see that the picture moves down. Is it expected behavior? How can I make sure that all elements are in the same positions regardless of how much I clicked on nvaigation buttons?
You should only have one NavigationView in your view hierarchy.
Right now, there are NavigationViews in ContentView and in CustomizeView any time you navigate to either with a NavigationLink, it will add an additional navigation bar to the view, pushing down your content.
To fix this, your root view could just be the NavigationView and then you links could navigation to views that do not contain additional NavigationViews.
struct ContentView: View {
var body: some View {
NavigationView {
BasicView()
}
}
}
struct BasicView : View {
var body: some View {
VStack {
Image(systemName: "pencil")
.resizable()
.scaledToFit()
.position(x: 100, y: 100)
.offset(x: 100)
Text("Thank you")
.position(x: 200)
}.toolbar{
ToolbarItemGroup(placement: .bottomBar) {
NavigationLink(destination: BasicView().navigationBarBackButtonHidden(true)) {
Text("Show QR")
}
Spacer()
NavigationLink(destination: CustomizeView().navigationBarBackButtonHidden(true)) {
Text("Customize")
}
}
}
}
}
struct CustomizeView: View {
var body: some View {
List {
Section(header: Text("Important tasks")) {
Text("Task data goes here")
Text("Task data goes here")
}
}.toolbar{
ToolbarItemGroup(placement: .bottomBar) {
NavigationLink(destination: BasicView().navigationBarBackButtonHidden(true)) {
Text("Show QR")
}
Spacer()
NavigationLink(destination: CustomizeView().navigationBarBackButtonHidden(true)) {
Text("Customize")
}
}
}
}
}
The problem is, I think you have called another ContentView from a ContentView. That's why one more navigation bar is added and shifted
You can create another view called QRShowView and place the qr image there and you have already CustomizeView view . Add two buttons in ContentView like show or customized.
Then call the respective view when is clicked.
I am facing a problem with SwiftUI's clipShape().
When I use clipShape() with Circle(), my iPad (iPad air 2) is lagging + black screen but with Capsule I haven't this lag.
This GIF presents you this problem :
clipShape with circle
And this GIF presents you clipShape() with Capsule() where I don't see any problem :
clipShape with capsule
This is the code I used to test this:
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
ForEach(1 ..< 5) { i in
HStack {
ForEach(1 ..< 15) { t in
Image(systemName: "plus")
.padding(10)
.background(Color.gray)
.clipShape(Circle())
}
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Thank you very much.
Glad to post my first question here!
I've been playing around with SwiftUI for a few weeks now and during a bigger project, I found the following bug.
If you have a TabView and a list inside it, if you try to change the tab while the scroll animation takes place, the app will crash with FATAL ERROR: "Thread 1: signal SIGABRT".
Console:
BugTest[11830:362796] precondition failure: attribute failed to set an initial value: 98
Have you ever encountered this? Is there any way I can solve this issue without changing my list into a ForEach?
Thank you in advance!
Code:
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
list()
.tabItem {
Image(systemName: "doc")
.font(.system(size: 25))
}
Text("Testing the bug")
.tabItem {
Image(systemName: "list.dash")
.font(.system(size: 25))
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct list: View {
var body: some View {
List(0..<50){_ in
Text("test")
}
}
}
According to this post, the error occurred because the items in the list were not conforming to the Identifiable protocol.
struct ContentView: View {
var body: some View {
TabView {
list()
.tabItem {
Image(systemName: "doc")
.font(.system(size: 25))
}
Text("Testing the bug")
.tabItem {
Image(systemName: "list.dash")
.font(.system(size: 25))
}
}
}
}
struct list: View {
var elements: [CustomInt] = []
init() {
for i in 0...1000{
elements.append(CustomInt(text:String(i)))
}
}
var body: some View {
List(elements){element in
Text(element.text)
}
}
}
struct CustomInt: Identifiable{
var id = UUID()
var text:String
}
This should work
struct ContentView: View {
var body: some View {
TabView {
VStack{
list()
.tabItem {
Image(systemName: "doc")
.font(.system(size: 25))
}
Text("Testing the bug")
.tabItem {
Image(systemName: "list.dash")
.font(.system(size: 25))
}
}
}
}}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}}
struct list: View {
var body: some View {
List(0..<50){_ in
Text("test")
}
}}
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]