scrollClipDisabled not support Form

Question

zacJI OP

Created Aug ’23

Replies 1

Boosts 0

Participants 1

Apple introduced a new API scrollClipDisabled to disable clip in List. But it dose not work in Form.

What should I do if I want to disable the clip action and show the shadow? Or maybe scrollClipDisabled should support Form too?

NavigationStack {
            Form {
                Section {
                    Picker("播放速度", selection: $playSpeed) {
                        ForEach(speeds, id: \.self) { speed in
                            Text(String(speed))
                        }
                    }
                    Picker("最高画质", selection: $mediaQuality) {
                        ForEach(MediaQualityEnum.allCases, id: \.self) { speed in
                            Text(speed.desp)
                        }
                    }
                    Toggle("Hevc优先", isOn: $preferHevc)
                    Toggle("无损音频和杜比全景声", isOn: $losslessAudio)
                } header: {
                    Text("播放器")
                }
            }
            .scrollClipDisabled()    // not work
}

Simulator Screenshot - Apple TV - 2023-08-11 at 18.19.18.jpg

Boost

Answer 1

zacJI OP

Aug ’23

I solved this problem. Actually Form support scrollClipDisabled ! The problem is that Form will not clip the content after setting the scrollClipDisabled, but the NavigationStack will still clip it. So we need to add a padding to the Form to give it space to display the shadow. Here is the correct demo.

NavigationStack {
            Form {
                Section {
                    Picker("播放速度", selection: $playSpeed) {
                        ForEach(speeds, id: \.self) { speed in
                            Text(String(speed))
                        }
                    }
                    Picker("最高画质", selection: $mediaQuality) {
                        ForEach(MediaQualityEnum.allCases, id: \.self) { speed in
                            Text(speed.desp)
                        }
                    }
                    Toggle("Hevc优先", isOn: $preferHevc)
                    Toggle("无损音频和杜比全景声", isOn: $losslessAudio)
                } header: {
                    Text("播放器")
                }
            }
            .padding(.leading, 60.0)  // add this
            .scrollClipDisabled()    // will work
}

0