VStack / HStack에서 SwiftUI 중복 테두리

Question

HStack 및 VStack에 많은 타일보기가 있습니다. 모든 타일에는 테두리가 있어야합니다. 내가 직면 한 문제는 스택에 간격을두고 싶지 않다는 것입니다. 그러나 이로 인해 View가 나란히 놓일 때 테두리가 중복됩니다.

내 예는 다음과 같습니다.

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)
    }
}

아래쪽 테두리의 너비는 1.0입니다. 그러나 이웃이있는 모든 곳에서 경계는 2.0 너비가됩니다. 그것에 대한 해결 방법이 있습니까? 특별한 가장자리에만 테두리를 설정해야하므로 중복이 발생하지 않습니다. 그러나 그것은 SwiftUI의 내 기본값이 아닙니다.

Answer 1

우리의 마음을 거꾸로 뒤집고 다음과 같은 것을 사용합시다.

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

간격을 사용할 수 있습니다 : -1.0 (또는 테두리 너비가 무엇이든) :)

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)
    }
  }

}