SwiftUI中Divider的可能错误
我正在构建一个iOS应用，目前发现Divider组件的行为异常。
请参见以下屏幕截图：
右上角的V形符号使其他两个（或多个）组件出现/消失，问题出现在垂直分隔线上，该分隔线应该出现在CONTROLS A旁边。
该视图的常规SwiftUI层次结构类似于ScrollView-> VStack-> ForEach-> [HStack-> Img Divider VStack（带有某些文本+ CONTROLS X）]。
请注意，它不仅发生在第一个组件上。 控件X包含SwiftUI组件，没有任何自定义。
现在，我在调试后发现了一些有趣的事实：
- 如果我通过显示布尔值的标志使分频器显示/消失，该标志会在点击时发生变化，
由于一直试图找到导致它失败的原因，所以我倾向于认为这可能是一个错误，因为Divider组件的最终高度没有正确更新。
更新： 该问题仅在某些设备上发生，iPhone 12就是其中之一。
这里有一些代码可以重现类似的问题（在这种情况下，分隔线可见，但高度错误）：
struct BugScreen: View {
var body: some View {
VStack {
Text("Bug Test")
ScrollView(showsIndicators: false) {
ForEach((1..<3)) { i in
MyView(index:i)
}
Spacer(minLength: 75)
}
.padding(.horizontal, 20)
}
.navigationBarTitle("", displayMode: .inline)
}
}
struct MyView: View {
@State var expanded = false
var index: Int
var body: some View {
VStack(spacing: 0) {
HStack(spacing: 15) {
Image("ImageName")
.resizable()
.frame(width: 50, height: 50)
Divider()
VStack(alignment: .leading) {
VStack(alignment: .leading, spacing: 5) {
HStack {
Text("Test \(index)")
.font(.headline)
.fontWeight(.light)
.fixedSize(horizontal: false, vertical: true)
Spacer()
Image(systemName: expanded ? "chevron.up": "chevron.down")
.padding(.leading, 10)
.font(Font.body.weight(.thin))
}
}
Divider()
Text("Some text")
.fixedSize(horizontal: false, vertical: true)
}
}
.padding([.vertical, .leading])
.padding(.trailing, 5)
.background(
RoundedRectangle(cornerRadius: expanded ? 0: 25, style: .continuous).foregroundColor(.white)
)
.onTapGesture {
withAnimation { expanded.toggle() }
}
if expanded {
Divider().background(Color(.black))
VStack {
ForEach((1..<4)) { control in
Spacer(minLength: 10)
MyControlsView()
Divider().background(Color(.black))
}
Text("More text")
}
.padding(.horizontal, 10)
.background(Color.white)
}
Divider().background(Color(.black))
}
}
struct MyControlsView: View {
@State var sliderValue = 0.0
var body: some View {
VStack {
HStack {
Image("image_name")
.resizable()
.frame(width: 50, height: 50, alignment: .center)
Divider()
VStack(alignment: .leading) {
Text("My controls")
Divider()
VStack(alignment: .leading) {
Slider(value: $sliderValue, in: 0...100)
Slider(value: $sliderValue, in: 0...100)
Slider(value: $sliderValue, in: 0...100)
Text("Hello")
Text("Some other text")
}
.disabled(false)
.padding(0)
.background(
RoundedRectangle(cornerRadius: 10, style: .continuous)
.foregroundColor(
.clear
)
)
}
}
}
.accentColor(.black)
.padding()
}
}
1 个答案:
答案 0 :(得分：0)
找到了使其达到预期效果的方法，只需添加.fixedSize(horizontal: false, vertical: true)