How can I make this arrow on the centre of the list?
struct ProductsList : View {
var body: some View {
VStack {
List {
Image(systemName: "shift")
}
}
}
}
You may just wanna use some Spacers.
struct ProductList : View {
var body: some View {
VStack {
List {
HStack {
Spacer()
Image(systemName: "shift")
Spacer()
}
}
}
}
}
I would suggest to use ViewModifier:
struct CenterModifier: ViewModifier {
func body(content: Content) -> some View {
HStack {
Spacer()
content
Spacer()
}
}
}
so that in your list, if you have more different type of UI elements its more convenient way to do so:
struct ExampleList: View {
var body: some View {
List {
Image(systemName: "shift").modifier(CenterModifier())
SomeOtherView().modifier(CenterModifier())
}
}
}
Try this:
var body: some View {
List {
GeometryReader { geometry in
VStack(alignment: .center) {
Image(systemName: "shift")
}.frame(width: geometry.size.width)
}
}
}
Related
I hide the navigation bar and provide a customized navigation bar.
But my list appears below the navigation bar.
I want the list to appear below the navigation bar when scrolling.
My desired effect:
Actual effect: Blocked 0
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
TabView {
FirstView()
.tabItem {
Image(systemName: "folder.fill")
Text("Home")
}
SecondView()
.tabItem {
Image(systemName: "folder.fill")
Text("SecondView")
}
}
.navigationBarTitleDisplayMode(.inline)
}
}
}
struct FirstView: View {
var body: some View {
ZStack(alignment: .top) {
List {
ForEach(0..<40, id: \.self) { index in
Text("cell view \(index)")
}
}
.listStyle(.inset)
HStack {
Text("首页")
}
.frame(maxWidth: .infinity)
.frame(height: 44)
.background(.bar)
}
.navigationBarTitleDisplayMode(.inline)
//.ignoresSafeArea(edges: .)
}
}
struct SecondView: View {
var body: some View {
List {
ForEach(0..<40, id: \.self) { index in
Text("FirstView2")
}
}
.listStyle(.inset)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Please do not add padding to the List. This is a security zone problem.
Edit: scrolling under the header
For a glass effect under the header:
You can add a "dummy" element that will push the list one row down. So the the header will cover the dummy element and the whole list will be visible.
struct FirstView: View {
var body: some View {
ZStack(alignment: .top) {
List {
// Dummy Text
Text("")
ForEach(0..<40, id: \.self) { index in
Text("cell view \(index)")
}
}
.listStyle(.inset)
HStack {
Text("首页")
}
.frame(maxWidth: .infinity)
.frame(height: 44)
.background(.bar)
.opacity(0.7)
}
.navigationBarTitleDisplayMode(.inline)
//.ignoresSafeArea(edges: .)
}
}
Original answer
Your FirstView is using a ZStack, which tells exactly the compiler to show one view on top of (covering) the other. Use a VStack, that should solve your issue.
struct FirstView: View {
var body: some View {
VStack {
HStack {
Text("首页")
}
.frame(maxWidth: .infinity)
.frame(height: 44)
.background(.bar)
List {
ForEach(0..<40, id: \.self) { index in
Text("cell view \(index)")
}
}
.listStyle(.inset)
}
.navigationBarTitleDisplayMode(.inline)
//.ignoresSafeArea(edges: .)
}
}
How do I navigate to other views I have created in swiftui?
below Is some code for the side bar I tried doing myself. the issue I was having is a white screen shows up as a huge white button.
VStack {
NavigationView {
HStack {
NavigationLink(destination: SettingsView()) {
Text("Settings")
.font(.system(size:20))
.foregroundColor(.black)
}
}
NavigationLink(destination: Settings()) {
Text("Settings")
.font(.title2)
}
}
NavigationLink(destination: AboutUs()) {
Text("About us")
.font(.title2)
}
}
}
}
Unless you're within a NavigationView, which has very specific appearances on iOS and macOS, you wouldn't be using NavigationLink. Since you're making your own sidebar, that means you won't be using Navigation View/Link.
Instead, you can use a #State variable or ObservableObject with a #Published property that keeps track of what view is active. I chose the latter in this example:
enum ViewTypes {
case main
case settings
case aboutUs
}
class SidebarNavigationManager : ObservableObject {
#Published var viewType : ViewTypes = .main
}
struct ContentView: View {
#StateObject var navigationManager = SidebarNavigationManager()
var body: some View {
HStack(alignment: .top) {
SidebarView(navigationManager: navigationManager)
.frame(width: 100)
.frame(maxHeight: .infinity)
.border(Color.green)
//Main content
VStack {
switch navigationManager.viewType {
case .main:
MainView()
case .settings:
SettingsView()
case .aboutUs:
AboutUsView()
}
}.frame(maxWidth: .infinity)
}.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
struct SidebarView : View {
#ObservedObject var navigationManager : SidebarNavigationManager
var body: some View {
//Sidebar
VStack {
Button(action: { navigationManager.viewType = .main }) {
Text("Main")
}
Button(action: { navigationManager.viewType = .settings }) {
Text("Settings")
}
Button(action: { navigationManager.viewType = .aboutUs }) {
Text("About Us")
}
}
}
}
struct MainView : View {
var body: some View {
Text("Main")
}
}
struct SettingsView : View {
var body: some View {
Text("Settings")
}
}
struct AboutUsView : View {
var body: some View {
Text("About Us")
}
}
I would like to open new View after clicking on a image button in SwiftUI, any idea?
Button(action: {}) {
Image("gift")
Text("Send")
.padding(.horizontal)
}
.padding()
.foregroundColor(.white)
.background(Color.gray)
.cornerRadius(.infinity)
If you want it in a NavigationView, you can use a NavigationLink instead of a Button:
struct ContentView : View {
var body: some View {
NavigationView {
NavigationLink(destination: DetailView()) {
Image("gift")
Text("Send")
.padding(.horizontal)
.padding()
.foregroundColor(.white)
.background(Color.gray)
.cornerRadius(.infinity)
}
}
}
}
struct DetailView : View {
var body: some View {
Text("Detail")
}
}
If you want a sheet presented, you can use the sheet modifier and a #State variable:
struct ContentView : View {
#State private var sheetPresented = false
var body: some View {
Button(action: {
sheetPresented = true
}) {
Image("gift")
Text("Send")
.padding(.horizontal)
}
.padding()
.foregroundColor(.white)
.background(Color.gray)
.cornerRadius(.infinity)
.sheet(isPresented: $sheetPresented) {
DetailView()
}
}
}
struct DetailView : View {
var body: some View {
Text("Detail")
}
}
Here is my code
struct ContentView: View {
#State var showingPopover = false
var body: some View {
VStack {
Spacer()
Text("Hello World")
Spacer()
HStack {
Spacer()
Button {
self.showingPopover.toggle()
} label: {
Image(systemName: "plus.circle")
}
.popover(isPresented: $showingPopover) {
List(0..<100) { Text("\($0)") }
}.padding(30)
}
}
}
}
This should produce a really nice popover coming from the plus button. But all I get is a really squashed down popover.
Any idea what I am missing here? Is there a way to tell the popover to expand more (without specifying a size)?
You may use a ScrollView and ForEach instead of a List:
struct ContentView: View {
#State var showingPopover = false
var body: some View {
VStack {
Spacer()
Text("Hello World")
Spacer()
HStack {
Spacer()
Button(action: {
self.showingPopover.toggle()
}) {
Image(systemName: "plus.circle")
}
.padding(30)
}
}
// can be attached to the button as well (as in the question)
.popover(isPresented: $showingPopover,
attachmentAnchor: .point(.bottomTrailing),
arrowEdge: .bottom) {
ScrollView(.vertical, showsIndicators: false) {
ForEach(0 ..< 100) {
Text("\($0)")
}
}
}
}
}
You can provide a custom frame for the List. Also, don't forget to embed List inside a ScrollView if you want it to scroll.
ScrollView {
List(0..<100) {
Text("\($0)")
}
.frame(width: 100, height: 250)
}
In SwiftUI, whenever a NavigationLink is inside a form, the destination view also seems to "styled" as if it's also in the form. This makes sense for pickers and such, but I'm just wanting to display a list of messages for an internal app that includes a simple email client. See recreated example below.
import SwiftUI
struct BasicRootView: View {
var body: some View {
NavigationView {
VStack(alignment: .leading) {
MailboxListView()
Spacer()
}
}
}
}
struct FormRootView: View {
var body: some View {
NavigationView {
Form {
MailboxListView()
}
}
}
}
struct MessageListView: View {
var body: some View {
List(0..<30) { i in
Text("Message \(i)")
}
.navigationBarTitle("Mailbox", displayMode: .inline)
}
}
struct MailboxListView: View {
var body: some View {
Section(header: Text("account#domain.com").font(.headline)) {
NavigationLink(destination: MessageListView()) {
HStack {
Image(systemName: "tray")
.font(.body)
Text("Inbox")
}
}
NavigationLink(destination: MessageListView()) {
HStack {
Image(systemName: "paperplane")
.font(.body)
Text("Sent")
}
}
NavigationLink(destination: MessageListView()) {
HStack {
Image(systemName: "bin.xmark")
.font(.body)
Text("Spam")
}
}
NavigationLink(destination: MessageListView()) {
HStack {
Image(systemName: "trash")
.font(.body)
Text("Trash")
}
}
}
.navigationBarTitle("Accounts")
}
}
The BasicRootView above doesn't look as I want it to, but the destination of its links looks like a normal list. So when I try to put it in a form to get the layout and look I'm going for, the destination list now itself looks like it's in a form as well, an unnecessary gap between the start of the list and the nav bar.
^^ No good
^^ Good
^^ Good
^^ No Good
Any way to "shed" the form in a destination view?
Just define the listStyle for both of your lists:
struct FormRootView: View {
var body: some View {
NavigationView {
List {
MailboxListView()
} .listStyle(GroupedListStyle())
}
}
}
struct MessageListView: View {
var body: some View {
List(0..<30) { i in
Text("Message \(i)")
} .listStyle(PlainListStyle())
.navigationBarTitle("Mailbox", displayMode: .inline)
}
}