เส้นขอบที่ซ้ำกันของ 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 / 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)
    }
  }

}