How to Remove Space Above and Below Text View in Swiftui

How to remove space above and below text view in SwiftUI?

The vertical space is occupied by the Text itself. Adding fixed negative padding isn't recommended. Use this, only if both text and font are hardcoded.

Text("360°")
    .font(Font.system(size: 80, weight: .thin, design: .default).monospacedDigit())
    .padding(.vertical, -18)
    .border(Color.red, width: 1),

Remove empty space in modified text

try something like this:

func textWithHashtags(_ text: String, color: Color) -> Text {
        let words = text.split(separator: " ")
        var output: Text = Text("")
        var firstWord = true // <-- here

        for word in words {
            let spacer = Text(firstWord ? "" : " ")  // <-- here
            if word.hasPrefix("@") { // Pick out hash in words
                output = output + spacer + Text(String(word))
                    .foregroundColor(color) // Add custom styling here
            } else {
                output = output + spacer + Text(String(word))
            }
            firstWord = false
        }
        return output
    }

Remove top padding from `List` in SwiftUI

Firstly, I would say that GroupedListStyle is working as intended.

On iOS, the grouped list style displays a larger header and footer
than the plain style, which visually distances the members of
different sections.

You say you have tried this, but it does work for me (Xcode 12.5.1):

    List { ... }    
    .onAppear(perform: {
        UITableView.appearance().contentInset.top = -35
    })

You could also hide the list header, by using a ZStack with the List at the bottom of the stack and the Picker over the top. The Picker does have transparency, so you would also have to add an opaque view to act as background for the Picker.

var body: some View {
    NavigationView {
        ZStack(alignment: .top) {
            List { ... }
            .listStyle(.grouped)
            .padding(.top, 30)
            
            Color.white
                .frame(height: 65)
            
            Picker { ... }
            .pickerStyle(.segmented)
            .padding()
        }
        .navigationBarTitle("Add Task", displayMode: .inline)
    }
}

As far as I can see this just appears the same as PlainListStyle would do, but I assume you have a particular reason for wanting to use GroupedListStyle.

How to eliminate the space above Section in SwiftUI Form?

The solution is to use a Section with an EmptyView() and place the view you want to be at the top in the header of this Section

 var body: some View {
        VStack {
            Text("Text 1")
            Form {
                Section(header: VStack(alignment: .center, spacing: 0) {
                    Text("Text 2").padding(.all, 16)
                        .frame(width: UIScreen.main.bounds.width, alignment: .leading)
                        .background(Color.white)
                }) {
                    EmptyView()
                }.padding([.top], -6)
            }
        }
    }

How do I minimize the space between a SearchBar in a NavigationView and the Text views above it?

Instead of using a NavigationView, you can do the following:

struct ContentView: View {
  @State private var searchText = ""
  
  var body: some View {
    VStack(alignment: .leading, spacing: 40) {
      VStack(alignment: .leading) {
        Text("Hi There!")
          .font(.largeTitle)
          .fontWeight(.heavy)
          .multilineTextAlignment(.leading)
          .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
        Text("Are you ready to work out?")
          .fontWeight(.heavy)
          .bold()
          .foregroundColor(.gray)
      }
      VStack(alignment: .leading, spacing: 3) {
        Text("Your Plans")
          .font(.largeTitle)
          .fontWeight(.heavy)
        SearchBar(text: $searchText)
      }
      Spacer()
    }
    .padding()
  }
}

struct SearchBar: View {
  @Binding var text: String
  @State private var isEditing = true
  
  var body: some View {
    HStack(spacing: 4) {
      Image(systemName: "magnifyingglass")
        .foregroundColor(.secondary)
      TextField("Search", text: $text)
        .onTapGesture {
          self.isEditing = true
        }
    }
    .frame(height: 45)
    .padding(.horizontal, 8)
    .background(Color(.systemGray6))
    .cornerRadius(15)
  }
}

PS: I have deliberately made the SearchBar view simple for brevity. You should add more functionality to it in a production application.

Swift/SwiftUI - Remove space above keyboard

It may be because of your constraints. When the keyboard pops up it may alter the frame view causing that issue. You may want to take a look at this stack overflow thread. iPhone X keyboard appear showing extra space

---

Related Topics