如何让SwiftUI中的Toggle组件右对齐且不扩展？

从截图可以看到，当前代码中的Text组件能在不扩展自身宽度的前提下靠右对齐，但Toggle组件会自动拉伸占据可用空间，无法实现同样的效果。

示例代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
        List() {
            HStack() {
                Label("Label", systemImage: "circle")
                    .frame(alignment: .leading)

                Spacer()
                
                Text("1")
                .frame(alignment: .trailing)
                .background(.red)
                
                Text("2")
                .frame(alignment: .trailing)
                .background(.green)
            }
            
            HStack() {
                Label("Label", systemImage: "circle")
                    .frame(alignment: .leading)

                Spacer()
                
                Toggle("", isOn: Binding(
                    get: { return false },
                    set: {_,_ in }))
                .frame(alignment: .trailing)
                .background(.red)
                
                Toggle("", isOn: Binding(
                    get: { return false },
                    set: {_,_ in }))
                .frame(alignment: .trailing)
                .background(.green)
            }
        }
    }
}

@main
struct TestAppApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

解决方法 #

问题出在Toggle默认会拉伸以填充可用空间，我们可以通过.fixedSize()强制它保持固有尺寸，之后再设置对齐方式就能和Text组件表现一致：

修改后的Toggle部分代码：

Toggle("", isOn: Binding(
    get: { return false },
    set: {_,_ in }))
.fixedSize()
.frame(alignment: .trailing)
.background(.red)

Toggle("", isOn: Binding(
    get: { return false },
    set: {_,_ in }))
.fixedSize()
.frame(alignment: .trailing)
.background(.green)

你也可以用.frame(maxWidth: nil, alignment: .trailing)替代.fixedSize()，效果完全一致，都是让Toggle不再拉伸，保持自身最小宽度。

完整修改后代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
        List() {
            HStack() {
                Label("Label", systemImage: "circle")
                    .frame(alignment: .leading)

                Spacer()
                
                Text("1")
                .frame(alignment: .trailing)
                .background(.red)
                
                Text("2")
                .frame(alignment: .trailing)
                .background(.green)
            }
            
            HStack() {
                Label("Label", systemImage: "circle")
                    .frame(alignment: .leading)

                Spacer()
                
                Toggle("", isOn: Binding(
                    get: { return false },
                    set: {_,_ in }))
                .fixedSize()
                .frame(alignment: .trailing)
                .background(.red)
                
                Toggle("", isOn: Binding(
                    get: { return false },
                    set: {_,_ in }))
                .fixedSize()
                .frame(alignment: .trailing)
                .background(.green)
            }
        }
    }
}

@main
struct TestAppApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

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