SwiftUIがVStack / HStackで境界線を複製しました

Aug 18 2020

HStackとVStackで多くのタイルを表示しています。すべてのタイルの周りに境界線が必要です。私が直面している問題は、スタックに間隔を空けたくないということです。ただし、ビューが隣り合って配置されているため、境界線が重複します。

これが私の例です:

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 / macOS10.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)
    }
  }

}