Дублированная граница SwiftUI в VStack / HStack

Aug 18 2020

У меня много плиток Просмотр в 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.

Ответы

1 Asperi Aug 18 2020 at 15:32

Давайте перевернем наш разум ... и воспользуемся чем-то вроде следующего

Протестировано с 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))
    }
}
1 lvollmer Aug 19 2020 at 14:34

Вы можете использовать интервал: -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)
    }
  }

}