동일한 간격으로 전체 너비를 채우는 SwiftUI H 스택

동일한 간격으로 전체 너비를 채우는 SwiftUI H 스택

나는 HSack을 가지고 있습니다.

struct BottomList: View {
    var body: some View {
        HStack() {
            ForEach(navData) { item in
                NavItem(image: item.icon, title: item.title)
            }
        }
    }
}

전체 너비를 자동으로 채우는 동일한 간격으로 콘텐츠를 완벽하게 중앙에 배치하려면 어떻게 해야 합니까?

참고로 부트스트랩 CSS 클래스와 같습니다..justify-content-around

그frame레이아웃 수정자, 사용.infinity를 위해maxWidth매개 변수는 추가적인 필요 없이 이를 달성하는 데 사용될 수 있습니다.Shape보다.

struct ContentView: View {
    var data = ["View", "V", "View Long"]

    var body: some View {
    VStack {

        // This will be as small as possible to fit the data
        HStack {
            ForEach(data, id: \.self) { item in
                Text(item)
                    .border(Color.red)
            }
        }

        // The frame modifier allows the view to expand horizontally
        HStack {
            ForEach(data, id: \.self) { item in
                Text(item)
                    .frame(maxWidth: .infinity)
                    .border(Color.red)
            }
        }
    }
    }
}

삽입했습니다.Spacer()각 항목 다음에...그러나 마지막 항목의 경우 추가하지 마십시오.Spacer():

struct BottomList: View {
    var body: some View {
        HStack() {
            ForEach(data) { item in
                Item(title: item.title)
                if item != data.last { // match everything but the last
                  Spacer()
                }
            }
        }
    }
}

항목 너비가 다른 경우에도 균등하게 간격을 둔 목록 예제:

(참고: 승인된 답변).frame(maxWidth: .infinity)모든 경우에 효과가 있었던 것은 아닙니다. 폭이 다른 품목에 대해서는 저에게 효과가 없었습니다.)

다양한*Stack유형은 하위 보기를 포함할 수 있는 가장 작은 크기로 축소하려고 시도합니다.하위 보기의 크기가 이상적인 경우*Stack화면을 채우기 위해 확장되지 않습니다.이 문제는 각 어린이를 클리어 위에 올려놓음으로써 해결할 수 있습니다.Rectangle순식간에ZStack왜냐하면Shape최대한 확장될 것입니다.이 작업을 수행하는 편리한 방법은 의 확장을 사용하는 것입니다.View:

extension View {
    func inExpandingRectangle() -> some View {
        ZStack {
            Rectangle()
                .fill(Color.clear)
            self
        }
    }
}

그러면 다음과 같이 부를 수 있습니다.

struct ContentView: View {
    var data = ["View", "View", "View"]

    var body: some View {
        VStack {

            // This will be as small as possible to fit the items
            HStack {
                ForEach(data, id: \.self) { item in
                    Text(item)
                        .border(Color.red)
                }
            }

            // Each item's invisible Rectangle forces it to expand
            // The .fixedSize modifier prevents expansion in the vertical direction
            HStack {
                ForEach(data, id: \.self) { item in
                    Text(item)
                        .inExpandingRectangle()
                        .fixedSize(horizontal: false, vertical: true)
                        .border(Color.red)
                }
            }

        }
    }
}

의 간격을 조정할 수 있습니다.HStack뜻대로

항목이 전체 너비와 호환되는 경우 자동으로 수행되며, 항목을 스페이서 사이에 래핑하여 다음과 같이 수행할 수 있습니다.

struct Resizable: View {
    let text: String

    var body: some View {
        HStack {
            Spacer()
            Text(text)
            Spacer()
        }
    }
}

그래서 당신은 그것을 다음과 같이 순환해서 사용할 수 있습니다.

HStack {
    ForEach(data, id: \.self) { item in
        Resizable(text: item)
    }
}

사용할 수도 있습니다.spacing겹겹이 쌓아올린

HStack(spacing: 30){
            
            Image("NetflixLogo")
                .resizable()
                .scaledToFit()
                .frame(width: 40)
            
            Text("TV Show")
            Text("Movies")
            Text("My List")
            
        }
.frame(maxWidth: .infinity)

출력 결과는 다음과 같습니다...

배열에 반복 값이 있는 경우 배열을 사용합니다.마지막 요소 뒤에 스페이서를 생략하는 인덱스입니다.

HStack() {
  ForEach(data.indices) { i in
    Text("\(data[i])")
    if i != data.last {
       Spacer()
    }
  }
}

저는 수용된 답변에 만족하지 않습니다. 왜냐하면 그들은 추가적인 "의사-패딩"을 남기기 때문입니다.Hstack

다음은 제 솔루션의 예입니다.

struct EvenlySpacedHStack: View {
    let items: [Int] = [1,2,3]
    var body: some View {
        ZStack() {
            Capsule().foregroundColor(.yellow)
            HStack() {
                ForEach(Array(items.enumerated()), id: \.element) { index, element in
                    
                    switch index {
                    case items.count - 1:
                        Image(systemName: "\(element).circle.fill")
                            .resizable()
                            .aspectRatio(1.0, contentMode: .fit)
                    default:
                        Image(systemName: "\(element).circle.fill")
                            .resizable()
                            .aspectRatio(1.0, contentMode: .fit)
                        Spacer()
                    }
                }
            }
            .padding(8)
        }
        .frame(height: 55)
    }
}

그 결과는 다음과 같습니다.

언급URL : https://stackoverflow.com/questions/58887526/swiftui-hstack-fill-whole-width-with-equal-spacing