I have a NaivgationView that has dynamic Leading item. That is to say, when a user taps on a button, its text gets updated. So it is not always the same.
This code has similar function as of my project.
struct ContentView: View {
#State var selectedDay: String = "Wednesday"
let days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
var body: some View {
NavigationView {
VStack {
List {
ForEach(0..<days.count) {day in
Button(action: {
self.selectedDay = days[day]
}, label: {
Text(days[day])
})
}
}
}
.navigationBarItems(leading: Text($selectedDay.wrappedValue))
}
}
}
I want that the text must be left aligned always. But if a text has fewer letters than the first one, it is not on the left. For example in the code above, Wednesday is on the very left edge, but friday is not. There is like 16 points on its leading side. So How to left align text?
I have used this code also but stil has the same issue.
VStack(alignment: .leading) {
Text($selectedDay.wrappedValue)
}
You can add a frame to the Text and set its alignment:
.navigationBarItems(leading:
Text(selectedDay)
.frame(width: 100, alignment: .leading)
)
Related
I'm trying to add a simple swipe action to my list. But for some reason the button can not be pressed. When I perform a full swipe it works though.
This is my code:
var listView: some View {
List {
ForEach(Array(debits.enumerated()), id: \.element) { index, debit in
HStack {
Text(debit.name)
.swipeActions(allowsFullSwipe: true) {
Button(action: {
print("Hi \(index)")
}, label: {
Image(systemName: "slider.horizontal.3")
})
}
Spacer()
Text(String(debit.value))
.frame(width: 70, alignment: .trailing)
Text("€")
Divider().padding(.leading, 5)
Toggle("", isOn: $debits[index].toggle)
.onChange(of: debit.toggle) { newValue in
calculateAvailable()
}
.frame(width: 50)
}
}
}.listStyle(.plain).lineLimit(1)
}
Like I said, a press on the button does not print anything but the full swipe does.
Move the .swipeActions modifier to the HStack containing the whole row:
List {
ForEach(Array(debits.enumerated()), id: \.element) { index, debit in
HStack {
Text(debit.name)
Spacer()
Text(String(debit.value))
.frame(width: 70, alignment: .trailing)
Text("€")
Divider().padding(.leading, 5)
Toggle("", isOn: $debits[index].toggle)
.onChange(of: debit.toggle) { newValue in
calculateAvailable()
}
.frame(width: 50)
}
.swipeActions(allowsFullSwipe: true) {
Button(action: {
print("Hi \(index)")
}, label: {
Image(systemName: "slider.horizontal.3")
})
}
}
}
Also, I would recommend adding a stable id to your Debit structure. Something like this:
struct Debit: Hashable, Identifiable {
var name: String
var value: Double
var toggle: Bool
let id = UUID()
}
and use that as your id:
ForEach(Array(debits.enumerated()), id: \.element.id) { index, debit in
If you weren’t enumerating to get the index, then you’d simply be able to iterate over debits since the items are Identifiable:
ForEach($debits) { $debit in
This is working fine, the HStack is your problem. Try to set the swipaction on the HStack
List {
ForEach(YourList, id: \.self) { debit in
Text(debit)
.swipeActions(allowsFullSwipe: true) {
Button(action: {
print("Hi \(index)")
}, label: {
Text("test")
})
}
}
}
enter code here
I just found the answer. I used this code to dismiss the keyboard when tapping somewhere. This prevented the button from being pressed.
var body: some View {
VStack {
my code
}
.onTapGesture {
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}
}
I also had this exact same problem and it turns out a containing view had an .onTapGesture handler which was capturing the presses on the button effectively making it only work after the full swipe, but not when tapped.
I am trying to recreate a layout similar to the Reminders app. Looking at it makes me think it was built with SwiftUI. I also believe Apple mentioned so in one of the WWDC videos (can't remember which one).
This above screenshot seems to be a List, with a LazyVGrid as the first View inside the List. Tapping on each of the items in the LazyVGrid, such as Today, Scheduled, All and Flagged, navigates to the relevant screen, which means they are all NavigationLinks. Also note that the LazyVGrid has 2 columns.
And then there is another section "My Lists" which has rows which look like regular list rows in a List with style .insetGrouped. Also, every item in this Section is a NavigationItem, and thus comes with the disclosure indicator on the right as usual. Recreating this is trivial, so it has been left out from the MRE.
I am having trouble recreating the first section, which has that LazyVGrid. I faced 3 problems (as mentioned in the image), of which I have been able to solve the first one only. The other two problems remain. I want to know if this MRE can be fixed, or is my entire approach incorrect.
I am including a minimum reproducible example below.
import SwiftUI
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
RemindersView()
}
}
}
struct RemindersView: View {
private var columns: [GridItem] = [GridItem(.adaptive(minimum: 150))]
private var smartLists: [SmartList] = SmartList.sampleLists
var body: some View {
NavigationView {
List {
Section(header: Text("Using LazyVGrid")) {
grid
}
Section(header: Text("Using HStack")) {
hstack
}
}
.navigationTitle("Store")
}
.preferredColorScheme(.dark)
}
private var grid: some View {
LazyVGrid(columns: columns, spacing: 8) {
ForEach(smartLists) { smartList in
// This use of **ZStack with an EmptyView with opacity 0** is a hack being used to avoid the disclosure indicator on each item in the grid
ZStack(alignment: .leading) {
NavigationLink( destination: SmartListView(list: smartList)) {
EmptyView()
}
.opacity(0)
SmartListView(list: smartList)
}
}
}
.listRowInsets(EdgeInsets())
.listRowBackground(Color.clear)
}
private var hstack: some View {
ScrollView(.horizontal) {
HStack {
ForEach(smartLists) { smartList in
NavigationLink(destination: SmartListView(list: smartList)) {
SmartListView(list: smartList)
}
.buttonStyle(.plain)
}
}
}
.listRowInsets(EdgeInsets())
.listRowBackground(Color.clear)
}
}
struct RemindersView_Previews: PreviewProvider {
static var previews: some View {
RemindersView()
}
}
struct SmartList: Identifiable {
var id: UUID = UUID()
var title: String
var count: Int
var icon: String
var iconColor: Color
static var sampleLists: [SmartList] {
let today = SmartList(title: "Today", count: 5, icon: "20.circle.fill", iconColor: .blue)
let scheduled = SmartList(title: "Scheduled", count: 12, icon: "calendar.circle.fill", iconColor: .red)
let all = SmartList(title: "All", count: 77, icon: "tray.circle.fill", iconColor: .gray)
let flagged = SmartList(title: "Flagged", count: 5, icon: "flag.circle.fill", iconColor: .orange)
return [today, scheduled, all, flagged]
}
}
struct SmartListView: View {
var list: SmartList
var body: some View {
VStack(alignment: .leading, spacing: 8) {
HStack(alignment: .center) {
Image(systemName: list.icon)
.renderingMode(.original)
.font(.title)
.foregroundColor(list.iconColor)
Spacer()
Text("\(list.count)")
.font(.system(.title, design: .rounded))
.fontWeight(.bold)
.padding(.horizontal, 8)
}
Text(list.title)
.font(.system(.headline, design: .rounded))
.foregroundColor(.secondary)
}
.padding(8)
.background(
RoundedRectangle(cornerRadius: 12)
.foregroundColor(.gray.opacity(0.25))
)
.padding(2)
.frame(minWidth: 150)
}
}
EDIT 1: Adding video demo of what editing the dynamic Grid looks like and how the Grid has dynamic grid items (via the Edit button at the top right): https://imgur.com/a/TV0kifY
I'm trying to align my Picker hidden label values left to another TextField in my form (see attached image). What's the best way to remove the 8px padding in the displayed picker value?
import SwiftUI
struct ContactFormView: View {
var countries = ["Malaysia", "Singapore", "Japan"]
#State var name: String = ""
#State var mobile: String = ""
#State var mobileCountry: String = "Malaysia"
var body: some View {
NavigationView {
Form {
Section(header: Text("Details")) {
TextField("Name", text: $name)
.border(Color.red, width: 1)
HStack {
Picker(selection: $mobileCountry, label: EmptyView()) {
ForEach(countries, id: \.self) {
Text($0).border(Color.red)
}
}
.scaledToFit()
.labelsHidden()
.border(Color.red, width: 1)
TextField("Mobile", text: $mobile)
.border(Color.red, width: 1)
}
}
}
.navigationBarTitle("New contact")
}
}
}
Probably your best bet is to use a negative padding on your picker:
Picker(selection: $mobileCountry, label: EmptyView()) {
ForEach(countries, id: \.self) {
Text($0).border(Color.red)
}
}
.scaledToFit()
.labelsHidden()
.border(Color.red, width: 1)
.padding(.horizontal, -8)
Loading your code in Xcode 12.5, adding that negative padding aligns the text in the way you want.
Intuitively I would have chosen .padding(.leading, -8) to remove padding for the Picker's leading edge only – but in doing so, the gap between the picker and text field grows larger.
Applying the negative padding to both horizontal values keeps that gap the same for me. But I'd recommend in your code trying both, and seeing which one makes the most sense for you.
I am trying to update the style of the HStack containing my text box when the Textbox is selected. In the example below, I want the text box to have a red border when selected, otherwise the border should be gray.
My issue is that the textbox seems to go through an intermediate transition that I don't want, which is the border is updated to red, but the keyboard doesn't pop up until I select the textbox again (The textbox moves up a bit and then goes back down). It seems that there is some issue with the ordering of how the view refresh happens.
#State private var text: String
#State private var textFieldSelected: Bool = false
var body: some View {
let stack = HStack {
TextField("Enter name", text: $text, onEditingChanged: {
(changed) in
textFieldSelected = changed
})
}
if (textFieldSelected) {
stack
.overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.red, lineWidth: 1))
} else {
stack
.overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.gray, lineWidth: 1))
}
}
Here's a video example of the existing behavior:
Make it even simpler by using ternary condition for the border and the issue won't appear
struct ContentView : View {
#State private var text: String = ""
#State private var textFieldSelected: Bool = false
var body: some View {
HStack {
TextField("Enter name", text: $text, onEditingChanged: {
(changed) in
textFieldSelected = changed
})
}
.overlay(RoundedRectangle(cornerRadius: 10).stroke(textFieldSelected ? Color.red : Color.gray, lineWidth: 1))
}
}
Tested on iPhone 8 Plus iOS 14
i have this code.
unfortunately the pickerview is not centered horizontally and there is too much space between the buttons and the pickerview (vertically), i now i can use offset, but is there a better way?
var body: some View {
NavigationView {
Form {
Section(header: Text("Hi"), content: {
Button("Alphabet") {
}.frame(alignment: .center)
Button("Ok") {
}.frame(alignment: .center)
HStack {
Picker(selection: $sortedBy,
label: Text(""),
content: {
ForEach(p, id: \.self) { category in
Text(category)
}
}).pickerStyle(WheelPickerStyle())
}
})
}
}
}
#Reiner Fischer...here is the result of your proposol (unfortunately not centered)
The problem is your empty label
label: Text(""),
even if the label is empty it takes some space on the left side of the picker. You can check by just adding some text to the label.
To get rid of the label, adjust your code like this:
.pickerStyle(WheelPickerStyle())
.labelsHidden()
That will center your picker selections
Update 21.02.2020
Hi Chris, enclosed is the code, i tested and that centers the picker:
struct PickerView: View {
let p:[Vital] = [
.init(name: "0"),
.init(name: "1"),
.init(name: "2"),
.init(name: "3")
]
#State private var sortedby = 0
var body: some View {
Picker(selection: $sortedby, label: Text("")) {
ForEach(p) { post in
Text(post.name)
}
}.pickerStyle(DefaultPickerStyle())
.labelsHidden()
}
}