Bordure dupliquée SwiftUI dans VStack / HStack

Question

J'ai de nombreuses vues de tuiles dans un HStack et un VStack. Chaque tuile doit avoir une bordure autour d'elle. Le problème auquel je suis confronté est que je ne veux pas d'espacement dans ma pile. Cependant, cela entraîne une bordure dupliquée lorsque la vue est placée l'une à côté de l'autre.

Voici mon exemple:

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

La bordure en bas a une largeur de 1,0. Cependant, partout où il y a un voisin, la frontière aura une largeur de 2,0. Y a-t-il un moyen de contourner ce problème? J'aurais besoin de définir une bordure uniquement sur des bords spéciaux, donc je n'obtiens aucune duplication. Mais ce n'est pas possible ma valeur par défaut dans SwiftUI.

Answer 1

Mettons notre esprit à l'envers ... et utilisons quelque chose comme ce qui suit

Testé avec 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

Vous pouvez utiliser l'espacement: -1,0 (ou quelle que soit la largeur de votre bordure) :)

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

}