如何最小化 NavigationView 中的 SearchBar 与其上方的 Text 视图之间的空间？

Posted 2023-02-24

【中文标题】如何最小化 NavigationView 中的 SearchBar 与其上方的 Text 视图之间的空间？

【英文标题】：How do I minimize the space between a SearchBar in a NavigationView and the Text views above it?

【发布时间】：2021-12-26 09:39:36

【问题描述】：

我试图在 NavigationView 中的 SearchBar 上方放置两个 Text 视图。有没有办法最小化 SearchBar 和它上面的 Text 视图之间的空间？ See screenshot.

另外，这样我的代码是最优的还是我可以在一个中实现所有元素？

在下面找到我目前所做的示例。

import SwiftUI

struct HomeView: View 
  
  @State private var searchText = ""
  
  var body: some View 
    VStack(alignment: .leading) 
      
      Text("Hi There!")
        .font(.largeTitle)
        .fontWeight(.heavy)
        .multilineTextAlignment(.leading)
        .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
        .padding([.top, .leading])
      
      Text("Are you ready to work out?")
        .fontWeight(.heavy)
        .bold()
        .foregroundColor(.gray)
        .padding(.leading)
      
      NavigationView 
        
        Text("")
          .navigationTitle("Your Plans")
          .searchable(text: $searchText)
      
      
    
    
  


struct SettingsView: View 
  var body: some View 
    Text("Your Profile")
      .font(.largeTitle)
      .fontWeight(.heavy)
      .multilineTextAlignment(.leading)
      .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
      .position(x: 125, y: 70)
    
  


struct ContentView: View 
  var body: some View 
    TabView
      HomeView()
        .tabItem 
          Text("Training")
            .foregroundColor(Color(red:0.388, green: 0.231, blue: 1.0))
        
      
      SettingsView()
        .tabItem () 
          Image(systemName: "slider.vertical.3")
          
        
        .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
    
    
  


struct ContentView_Previews: PreviewProvider 
  static var previews: some View 
    ContentView()
      .preferredColorScheme(.dark)
  

【参考方案1】：

您可以执行以下操作，而不是使用 NavigationView：

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：为简洁起见，我特意让 SearchBar 视图变得简单。您应该在生产应用程序中为其添加更多功能。