Bordo duplicato SwiftUI in VStack / HStack

Aug 18 2020

Sto avendo molti riquadri Visualizza in un HStack e VStack. Ogni tessera dovrebbe avere un bordo intorno. Il problema che sto affrontando è che non voglio avere alcuna spaziatura nel mio Stack. Tuttavia, ciò si traduce in un bordo duplicato poiché la vista si trova l'una accanto all'altra.

Ecco il mio esempio:

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

Il bordo in basso ha una larghezza di 1.0. Tuttavia, ovunque ci sia un vicino, il confine sarà largo 2.0. C'è qualche soluzione per questo? Avrei bisogno di impostare il bordo solo su bordi speciali, quindi non ottengo duplicazioni. Ma non è possibile come impostazione predefinita in SwiftUI.

Risposte

1 Asperi Aug 18 2020 at 15:32

Mettiamo sottosopra la nostra mente ... e usiamo qualcosa come il seguente

Testato con 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

Puoi usare la spaziatura: -1.0 (o qualunque sia la larghezza del tuo bordo) :)

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

}