无法在Swiftui中对齐多个控件

Question

“上周活动”之间的距离是

我正在尝试使用Swiftui进行对齐控件，但不确定为什么在段控制和搜索栏之间以及扫描图标与以下 Swiftui：

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack{
            ContentViewHeader().background(Color.yellow)
            ContentViewSearchBar().background(Color.cyan)
            ContentViewFilter().background(Color.green)
            ContentViewTableView().background(Color.orange)
        }
    }
}

struct ContentViewHeader: View {
    @State private var favoriteColor = 0
    
  var body: some View {
      VStack {
          Text("Colors & Content ").font(.system(size: 21, weight: .bold, design: .default)).multilineTextAlignment(.leading).padding()
          Spacer()
                  .frame(height: 30)
          Picker("What is your favorite color?", selection: $favoriteColor) {
                          Text("Red").tag(0)
                          Text("Green").tag(1)
                          Text("Blue").tag(2)
         }.pickerStyle(.segmented)
      }
      .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
      .navigationViewStyle(StackNavigationViewStyle())
    }
}


struct ContentViewSearchBar: View {
    @State private var searchText = ""

        var body: some View {
            NavigationView {
                Text("")
                    .searchable(text: $searchText, prompt: "Search")
            }
    }
}

struct ContentViewTableView: View {
    
    var dataTypeList = [
        DataType(name: "Integer", size: "4 bytes", color: .red),
        DataType(name: "Character", size: "1 byte", color: .blue),
        DataType(name: "Float", size: "4 bytes", color: .green),
        DataType(name: "Double", size: "8 bytes", color: .yellow),
        DataType(name: "Integer", size: "4 bytes", color: .red),
        DataType(name: "Character", size: "1 byte", color: .blue),
        DataType(name: "Float", size: "4 bytes", color: .green),
        DataType(name: "Double", size: "8 bytes", color: .yellow),
      ]
    
  var body: some View {
      List(dataTypeList, id: \.name) { dataType in
            HStack {
              Text(dataType.name)
              Text(dataType.size).foregroundColor(dataType.color)
            }
     }
  }
}

struct DataType {
  let name: String
  let size: String
  let color: Color
}

struct ContentViewFilter: View {
  var body: some View {
      HStack {
          Text("           Last week activities                           ").font(.system(size: 10, weight: .bold, design: .default)).padding()
          
          Button(action: {
              // do something here
          }, label: {
                   Image("scan")
          }).frame(width: 40, height: 40, alignment: .center)
      }
  }


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
}

不确定我需要在SwiftUI代码中进行哪些校正，以便删除段控制和搜索栏之间的差距/距离，甚至对于扫描图标也被删除。它应该类似于故事板图像的图像。