SwiftUI中controlSize属性为何无法生效？

兄弟，我太懂你碰到官方文档代码居然不生效的无语感了！其实问题出在你直接给自定义的MyControls视图加.controlSize()修饰符的操作上——controlSize这个修饰符是需要直接作用在原生支持它的SwiftUI控件（比如Picker、Slider这类）身上的，自定义视图本身并不会自动把这个尺寸设置传递给内部的子控件。

要解决这个问题，有两种简单的办法：

方法一：给自定义视图添加ControlSize参数，内部传递给子控件 #

修改你的MyControls结构体，让它接收一个ControlSize参数，然后把这个参数应用到内部每个支持的控件上：

struct MyControls: View {
    var label: String
    var controlSize: ControlSize = .regular // 新增尺寸参数
    @State private var value = 3.0
    @State private var selected = 1
    
    var body: some View {
        HStack {
            Text(label + ":")
            Picker("Selection", selection: $selected) {
                Text("Option 1").tag(1)
                Text("Option 2").tag(2)
                Text("Option 3").tag(3)
            }
            .controlSize(controlSize) // 给Picker应用尺寸
            Slider(value: $value, in: 1...5)
            .controlSize(controlSize) // 给Slider应用尺寸
        }
    }
}

然后调用的时候直接传入对应的尺寸：

struct ControlSizeDemo: View {
    var body: some View {
        VStack {
            MyControls(label: "Mini", controlSize: .mini)
            MyControls(label: "Small", controlSize: .small)
            MyControls(label: "Regular", controlSize: .regular)
        }
        .padding()
        .frame(width: 450)
        .border(Color.gray)
    }
}

方法二：使用环境变量传递尺寸 #

如果你不想修改自定义视图的参数，可以用environment(\.controlSize, ...)把尺寸设置注入到视图环境中，内部所有支持controlSize的控件会自动响应这个设置：

struct ControlSizeDemo: View {
    var body: some View {
        VStack {
            MyControls(label: "Mini")
                .environment(\.controlSize, .mini)
            MyControls(label: "Small")
                .environment(\.controlSize, .small)
            MyControls(label: "Regular")
                .environment(\.controlSize, .regular)
        }
        .padding()
        .frame(width: 450)
        .border(Color.gray)
    }
}

这样修改之后，你就能看到Picker和Slider按照设置的尺寸正常显示啦！

备注：内容来源于stack exchange，提问作者Rehan Ali Khan