Borda duplicada SwiftUI em VStack / HStack

Aug 18 2020

Estou tendo muitos blocos Exibir em um HStack e VStack. Cada ladrilho deve ter uma borda ao redor. O problema que estou enfrentando é que não quero ter nenhum espaçamento na minha pilha. No entanto, isso está resultando em uma borda duplicada como a View posicionada uma ao lado da outra.

Aqui está meu exemplo:

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

A borda inferior tem 1,0 largura. Porém, em todos os lugares onde houver um vizinho, a fronteira terá 2,0 de largura. Existe alguma solução para isso? Eu precisaria definir a borda apenas em bordas especiais, então não obtenho nenhuma duplicação. Mas isso não é possível meu padrão no SwiftUI.

Respostas

1 Asperi Aug 18 2020 at 15:32

Vamos colocar nossa mente de cabeça para baixo ... e usar algo como o seguinte

Testado com 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

Você pode usar espaçamento: -1,0 (ou qualquer que seja a largura da sua borda) :)

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

}