Đường viền sao chép SwiftUI trong VStack / HStack

Question

Tôi đang có nhiều ô Xem trong HStack và VStack. Mỗi ô phải có một đường viền xung quanh nó. Vấn đề mà tôi đang phải đối mặt là, tôi không muốn có bất kỳ khoảng cách nào trong Stack của mình. Tuy nhiên, điều đó dẫn đến đường viền bị trùng lặp khi Chế độ xem nằm cạnh nhau.

Đây là ví dụ của tôi:

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

Đường viền ở dưới cùng có chiều rộng 1,0. Tuy nhiên, ở bất cứ nơi nào có láng giềng, biên giới sẽ rộng 2,0. Có bất kỳ công việc xung quanh cho điều đó? Tôi sẽ chỉ cần đặt đường viền ở các cạnh đặc biệt, vì vậy tôi không nhận được bất kỳ sự trùng lặp nào. Nhưng đó không phải là mặc định của tôi trong SwiftUI.

Answer 1

Hãy đảo lộn tâm trí của chúng ta ... và sử dụng những thứ như sau

Đã kiểm tra với 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

Bạn có thể sử dụng khoảng cách: -1.0 (hoặc bất kỳ chiều rộng đường viền của bạn là gì) :)

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

}