SwiftUI ScrollView内容对齐异常：条目不足时无法保持右对齐

我需要展示可能超出水平可用空间的条目：

• 当条目总宽度超过可用空间时，ScrollView里的条目会自动右对齐（符合预期）：
  
• 但条目总宽度小于可用空间时，它们会左对齐（不符合需求）：
  

试过添加Spacer()和调整frame尺寸都没用，以下是我的代码：

struct TestView: View {
    @State private var buffer: String
    @State private var size = 50
    @State private var selectedSize = 1

    init() {
        buffer = "0"
    }

    var body: some View {
        VStack(spacing:0) {
            Grid {
                GridRow {
                    Text("Number Of Items")
                        .gridColumnAlignment(.trailing)

                    Picker("", selection: $selectedSize) {
                        ForEach(0 ..< size, id: \.self) { idx in
                            Text("\(idx)")
                                .tag(idx)
                        }
                    }
                    .labelsHidden()
                    .pickerStyle(.automatic)
                    .onChange(of: selectedSize) { _, _ in
                        buffer = "0".padding(toLength: selectedSize, withPad: "0", startingAt: 0)
                    }
                }

                GridRow {
                    Text("Items")
                        .gridColumnAlignment(.trailing)

                    ScrollView(.horizontal) {
                        ScrollViewReader { value in
                            HStack(spacing: 0) {
                                // Spacer()
                                ForEach(0 ..< buffer.count, id: \.self) { idx in
                                    ItemView(idx: buffer.count - 1 - idx, value: buffer[idx])
                                        .background(.gray)
                                }
                                .onChange(of: buffer.count) {
                                    value.scrollTo(buffer.count - 1)
                                }
                            }
                            // .frame(maxWidth: .infinity, alignment: .trailing)
                            .background(.green)
                        }
                    }
                    .background(.blue)
                    .gridColumnAlignment(.trailing)
                }
            }
        }
        .padding()
    }
}

struct ItemView: View {
    var idx: Int
    var value: String

    var body: some View {
        VStack {
            Text("\(idx)")
            Spacer()
            Text(value)
        }
        .frame(width: 20, height: 45)
        .border(Color.red)
    }
}

解决方案 #

核心问题是ScrollView及其内部的HStack没有正确利用可用宽度，导致内容无法始终右对齐。只需两处修改：

1. 给ScrollView添加.frame(maxWidth: .infinity)，确保它能占据Grid列的全部可用宽度；
2. 给HStack添加.frame(maxWidth: .infinity, alignment: .trailing)，让HStack撑满ScrollView的宽度，并将内容右对齐。

修改后的完整代码：

struct TestView: View {
    @State private var buffer: String
    @State private var size = 50
    @State private var selectedSize = 1

    init() {
        buffer = "0"
    }

    var body: some View {
        VStack(spacing:0) {
            Grid {
                GridRow {
                    Text("Number Of Items")
                        .gridColumnAlignment(.trailing)

                    Picker("", selection: $selectedSize) {
                        ForEach(0 ..< size, id: \.self) { idx in
                            Text("\(idx)")
                                .tag(idx)
                        }
                    }
                    .labelsHidden()
                    .pickerStyle(.automatic)
                    .onChange(of: selectedSize) { _, _ in
                        buffer = "0".padding(toLength: selectedSize, withPad: "0", startingAt: 0)
                    }
                }

                GridRow {
                    Text("Items")
                        .gridColumnAlignment(.trailing)

                    ScrollView(.horizontal) {
                        ScrollViewReader { value in
                            HStack(spacing: 0) {
                                ForEach(0 ..< buffer.count, id: \.self) { idx in
                                    ItemView(idx: buffer.count - 1 - idx, value: buffer[idx])
                                        .background(.gray)
                                }
                                .onChange(of: buffer.count) {
                                    value.scrollTo(buffer.count - 1)
                                }
                            }
                            .frame(maxWidth: .infinity, alignment: .trailing)
                            .background(.green)
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .background(.blue)
                    .gridColumnAlignment(.trailing)
                }
            }
        }
        .padding()
    }
}

struct ItemView: View {
    var idx: Int
    var value: String

    var body: some View {
        VStack {
            Text("\(idx)")
            Spacer()
            Text(value)
        }
        .frame(width: 20, height: 45)
        .border(Color.red)
    }
}

这样修改后，无论条目总宽度是否超过可用空间，都会始终保持右对齐。

内容的提问来源于stack exchange，提问作者Fab