Zduplikowana ramka SwiftUI w VStack / HStack

Question

Mam wiele kafelków View w HStack i VStack. Każda płytka powinna mieć wokół siebie obramowanie. Problem, z którym się zmagam, polega na tym, że nie chcę mieć żadnych odstępów w moim stosie. Jednak powoduje to zduplikowane obramowanie, gdy Widok leży obok siebie.

Oto mój przykład:

struct TileMain: View {
    
    var body: some View {

        VStack
        {
            HStack(spacing: 0.0)
            {
                Tile()
                    .border(Color.red, width: 1.0)
                Tile()
                    .border(Color.red, width: 1.0)
                Tile()
                    .border(Color.red, width: 1.0)
            }
            HStack(spacing: 0.0)
            {
                Tile()
                .border(Color.red, width: 1.0)

                Tile()
                    .border(Color.red, width: 1.0)
                
                Tile()
                    .border(Color.red, width: 1.0)
            }
            .padding(.bottom, 15)
        }
    }
}
struct Tile : View
{
    var body: some View
    {
        VStack
        {
            Spacer()
            Text("Test")
            Spacer()
        }.frame(width: 150, height: 150)
    }
}

Obramowanie na dole ma szerokość 1,0. Jednak wszędzie tam, gdzie jest sąsiad, granica będzie szeroka na 2,0. Czy jest na to jakiś sposób? Musiałbym ustawić obramowanie tylko na specjalnych krawędziach, więc nie mam żadnych duplikatów. Ale to nie jest możliwe w moim domyślnym interfejsie SwiftUI.

Answer 1

Obróćmy umysł do góry nogami ... i użyjmy czegoś podobnego do następującego

Przetestowano z Xcode 11.4 / macOS 10.15.6

struct TileMain: View {

    var body: some View {

        VStack(spacing: 1)
        {
            HStack(spacing: 1)
            {
                Tile()
                Tile()
                Tile()
            }
            HStack(spacing: 1)
            {
                Tile()
                Tile()
                Tile()
            }
        }
        .padding(1)
        .background(Color.red)
    }
}
struct Tile : View
{
    var body: some View
    {
        VStack
        {
            Spacer()
            Text("Test")
            Spacer()
        }.frame(width: 150, height: 150)
        .background(Color(NSColor.windowBackgroundColor))
    }
}

Answer 2

Możesz użyć odstępów: -1,0 (lub dowolnej szerokości obramowania) :)

struct TileMain: View {
  var body: some View {
    VStack(spacing: -1.0)
    {
      HStack(spacing: -1.0)
      {
        Tile()
          .border(Color.red, width: 1.0)
        Tile()
          .border(Color.red, width: 1.0)
        Tile()
          .border(Color.red, width: 1.0)
      }
      HStack(spacing: -1.0)
      {
        Tile()
        .border(Color.red, width: 1.0)
        Tile()
          .border(Color.red, width: 1.0)
        Tile()
          .border(Color.red, width: 1.0)
      }
      .padding(.bottom, 15)
    }
  }

}