VStack/HStack 中的 SwiftUI 重复边框答案

【问题标题】：SwiftUI duplicated border in VStack/HStackVStack/HStack 中的 SwiftUI 重复边框
【发布时间】：2020-12-07 09:27:15
【问题描述】：

我在 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 中的默认设置。

【问题讨论】：

标签： swiftui

【解决方案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))
    }
}

【讨论】：

又是一个好人 Asperi！谢谢。我实际上发现间距 -1 也可以，但你的看起来更好。

【解决方案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)
    }
  }

}

【讨论】：