swiftui picker标签可视化答案

【问题标题】：swiftui picker label visualizationswiftui picker标签可视化
【发布时间】：2022-12-10 09:37:03
【问题描述】：

我在 swiftui 的菜单中使用选择器进行标签可视化时遇到问题 when the selection change the text seams to be animated in writing so it appear slowly with dot ... and and after appear all the text, but I don figure out why do this 这是代码，我附上了一个简短的 gif 来演示这个问题，它出现在画布上，但也出现在模拟器和真实设备中


struct AddCostView: View {
    
    @State private var transactionSelectionPicker: TransactionType = .outgoing
    @State private var pickerPressed: Bool = false
    @State private var backgroundColor: String = "Outgoing"
    
    var body: some View {
        NavigationView {
            
            ZStack {
                Color(backgroundColor)
                    .ignoresSafeArea(.container, edges: .top)
                VStack {
                    HStack {
                        Text("Tipo di transazione:")
                            .font(.headline)
                            .foregroundColor(.secondary)
                        
                        Spacer()
                        Menu {
                            Picker("transazioni", selection: $transactionSelectionPicker) {
                                ForEach(TransactionType.allCases, id: \.rawValue) { item in
                                    Text(item.rawValue)
                                        .tag(item)
                                }
                            }
                            .labelsHidden()
                            .pickerStyle(.inline)
                            .onChange(of: transactionSelectionPicker) { newValue in
                                pickerPressed.toggle()
                                switch newValue {
                                case .outgoing:
                                    backgroundColor = "Outgoing"
                                case .incoming:
                                    backgroundColor = "Incoming"
                                case .transfer:
                                    backgroundColor = "Transfer"
                                case .currecyChange:
                                    backgroundColor = "CurrencyChange"
                                }
                            }
                        } label: {
                            HStack(spacing: 8) {
                                
                                Text(transactionSelectionPicker.rawValue)
                                    .foregroundColor(Color(UIColor.label))
                                    .bold()
                                    
                                Image(systemName: "chevron.right")
                                    .foregroundColor(.secondary)
                                    .rotationEffect(pickerPressed ? Angle(degrees: 90) : Angle(degrees: 0))
                                    .font(.headline)
                                
                                
                            }
                            .padding()
                            
                            
                        }
                        .frame(width: 170, alignment: .leading)
                        .background(
                            .ultraThickMaterial, in: RoundedRectangle(cornerRadius: 8, style: .continuous)
                        )
                        .onTapGesture {
                            pickerPressed.toggle()
                        }
                        
                    }
                    .padding()
                    
                    List {
                        Text("t")
                    }
                }
                
                
                
            }
            
            
            
            .navigationTitle("Transazione")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

foreach 是用枚举完成的我没有动画或事务

感谢任何能帮助我的人

【问题讨论】：

你知道如何解决它吗？我有同样的问题。谢谢。

标签： swift swiftui picker

【解决方案1】：

我遇到了类似的问题。我解决这个问题的方法是使用 .fixedSize() 修饰符。这解决了当视图变大时获取 ... 的问题，但当它缩小时它看起来也有点奇怪。所以我创建了一个状态变量并使用 .onChnage(of: value) 检查新值是更长还是更短，然后仅在新值更长的情况下才应用 .fixedSize()。这是它的外观的粗略概念。

@State private var isLonger = true
@State private var value = "initial value"
...

// value here is the variable that stores the current selection value for the picker
var body: some View {
  PickerView
    .onChange(of: value) { [value] newValue in
      isLonger = newValue.count > value.count
    }

}

var PickerView: some View {
  if isLonger {
    MenuPicker()
      .fixedSize()
  } else {
    MenuPicker()
  }
}

【讨论】：