模态选择器没有向右滚动SwiftUI

Posted 2023-02-23

【中文标题】模态选择器没有向右滚动SwiftUI

【英文标题】：Modal picker not scrolling right SwiftUI

【发布时间】：2020-05-20 22:19:53

【问题描述】：

我创建了一个模式，但它似乎在选择上有一个错误。当向左滚动时，它向右滚动，我必须走到左边才能滚动，这就是它的样子：

import SwiftUI

struct ContentView: View 

@State var showingModal = false
@State var hours: Int = 0
@State var minutes: Int = 0

var body: some View 

    ZStack 
        VStack 
            Button("Show me")
                self.showingModal = true
            

            if $showingModal.wrappedValue 
                VStack(alignment: .center) 
                    ZStack
                        Color.black.opacity(0.4)
                            .edgesIgnoringSafeArea(.vertical)
                        // this one is it
                        VStack(spacing: 20) 
                            Text("Time between meals")
                                .bold().padding()
                                .frame(maxWidth: .infinity)
                                .background(Color.yellow)
                                .foregroundColor(Color.white)

                            HStack 
                                Spacer()
                                VStack 
                                    Picker("", selection: $hours)
                                        ForEach(0..<4, id: \.self)  i in
                                            Text("\(i) hours").tag(i)
                                        
                                    
                                    .frame(width: 150, height: 120)
                                    .clipped()
                                

                                VStack 
                                    Picker("", selection: $minutes)
                                        ForEach(0..<60, id: \.self)  i in
                                            Text("\(i) min").tag(i)
                                        
                                    
                                    .frame(width: 150, height: 120)
                                    .clipped()
                                
                            

                            Spacer()

                            Button(action: 
                                self.showingModal = false
                            )
                                Text("Close")
                             .padding()
                        
                        .frame(width:300, height: 300)
                        .background(Color.white)
                        .cornerRadius(20).shadow(radius: 20)
                       
                
            
        
    

我该如何修复这个小错误？我尝试使用布局但没有用...任何帮助将不胜感激

【参考方案1】：

如果我告诉你你的 Picker 不工作的原因是这条线怎么办？

.cornerRadius(20).shadow(radius: 20)

不幸的是，SwiftUI 仍然有很多错误，有时它并没有做它应该做的事情，尤其是 Pickers 并不那么可靠。我想我们需要等待，看看 SwiftUI 的下一次迭代，但现在你可以用下面的代码替换那行：

.mask(RoundedRectangle(cornerRadius: 20))
.shadow(radius: 20)

【参考方案2】：

只有影响所有视图层次结构（即所有子视图）的修饰符可以改变结果布局/呈现/行为。而.cornerRadius 和.shadow 就是这样的类型修饰符。

解决方案是（按预期）将这些修饰符仅应用于整个构造视图，这里是

.compositingGroup()  // <<< fix !!
.cornerRadius(20).shadow(radius: 20)

其中.compositionGroup 旨在使上方视图层次结构平面渲染 以及仅应用于该平面视图的所有下方修饰符。

【讨论】：

很好的答案@Asperi！我试图记住那个修饰符，但想不起来。尽管如此，将cornerRadius应用于所有内部视图（在本例中为Picker）并不能解释它会改变其框架，因此我认为这种行为是一个错误。