当我在 SwiftUI 中应用工具栏配色方案修改器时，为什么底部工具栏项目的位置会发生变化？

Question

因此，当工具栏项目超过 2 个时，默认项目位置是左侧层次结构中的所有项目 (ToolbarItem) 和右侧层次结构中的最后一个项目 (ToolbarItem)。

在我应用

.toolbarColorScheme(.light, for: .bottomBar)

或

.toolbarColorScheme(.dark, for: .bottomBar)

修饰符并 一直滚动到底部后，第二个项目也会转到右侧。

//
//  ToolbarGlitchDemo.swift
//  ToolbarGlitchDemo
//
//  Created by rayhaanlykhan on 15/04/2024.
//

import SwiftUI

struct ToolbarGlitchDemo: View {
    
    var body: some View {
        
        NavigationStack {
            
            ZStack {
                
                Color.gray.ignoresSafeArea()
                
                ScrollView {
                    
                    ForEach(0..<15) { _ in
                        
                        Rectangle()
                            .fill(.blue)
                            .frame(width: 200, height: 200)
                            .frame(maxWidth: .infinity)
                    }
                }
            }
            .navigationTitle("Toolbar Glitch Demo")
            
            .toolbar {
                                
                ToolbarItem(placement: .bottomBar) { // center
                    
                    HStack {
                        Image(systemName: "scribble")
                        Image(systemName: "gear")
                    }
                    .background(.yellow)
                }
                
                ToolbarItem(placement: .bottomBar) {
                    
                    HStack {
                        Image(systemName: "person.fill")
                    }
                    .background(.red)
                }
                
                ToolbarItem(placement: .bottomBar) {
                    
                    HStack {
                        Image(systemName: "person")
                        Image(systemName: "person")
                    }
                    .background(.green)
                }
            }
            .toolbarColorScheme(.light, for: .bottomBar)
        }
    }
}

#Preview {
    ToolbarGlitchDemo()
}

Answer 1

有趣！由于所有 3 个

ToolbarItem

都被指定了位置

.bottomBar

，底部栏中的实际位置可能未定义。

我发现，当你单独添加图像时（换句话说，如 5

ToolbarItem

），它会以 4+1 开始，当你滚动到底部时切换到 1+4 -> 也不一致。

您可以通过设置一个由

ToolbarITem

组成的单个

HStack

来修复，您可以在其中定义间距：

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        HStack {
            HStack {
                Image(systemName: "scribble")
                Image(systemName: "gear")
            }
            .background(.yellow)

            Spacer()

            HStack {
                Image(systemName: "person.fill")
            }
            .background(.red)

            Spacer()

            HStack {
                Image(systemName: "person")
                Image(systemName: "person")
            }
            .background(.green)
        }
    }
}
.toolbarColorScheme(.light, for: .bottomBar)