SwiftUI主工具栏项实现带边距的无限滚动标签

核心思路 #

给无限滚动的文本组件首尾添加与返回按钮区域匹配的边距，让滚动的起始、结束位置自动避开返回按钮的占用区域，同时保持滚动的连续性。

具体修改方案 #

1. 动态获取导航栏左侧边距 #

在滚动组件的父视图中，利用GeometryReader读取系统安全区域的左侧内边距，再加上iOS导航栏默认的按钮间距：

GeometryReader { geo in
    // 16为iOS导航栏按钮与屏幕边缘的默认间距，可根据实际调整
    let leadingMargin = geo.safeAreaInsets.leading + 16
    InfiniteScrollText(longText: "你的超长文本内容", edgeMargin: leadingMargin)
}

2. 修改无限滚动组件的布局逻辑 #

假设你原有的组件是通过复制文本实现循环滚动，需要给首尾的文本副本添加对应边距：

struct InfiniteScrollText: View {
    let longText: String
    let edgeMargin: CGFloat
    @State private var scrollOffset: CGFloat = 0
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 0) {
                // 开头文本：左侧添加边距，避开返回按钮
                Text(longText)
                    .padding(.leading, edgeMargin)
                
                // 中间重复文本，保持原循环逻辑
                Text(longText)
                
                // 结尾文本：右侧添加边距，保证滚动到末尾时也避开右侧（如果有工具栏项）
                Text(longText)
                    .padding(.trailing, edgeMargin)
            }
            .offset(x: scrollOffset)
            .onAppear {
                // 保持原自动滚动动画逻辑，注意偏移量要适配新增的边距
                withAnimation(.linear(duration: 12).repeatForever(autoreverses: false)) {
                    scrollOffset = -UIScreen.main.bounds.width
                }
            }
        }
        .scrollDisabled(true)
    }
}

3. 适配自定义返回按钮的场景 #

如果用了自定义宽度的返回按钮，通过PreferenceKey动态获取按钮实际宽度：

// 定义用于传递视图宽度的PreferenceKey
struct ViewWidthKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

// 在导航栏返回按钮上绑定宽度监听
NavigationView {
    // 主内容视图
}
.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: { /* 返回逻辑 */ }) {
            Image(systemName: "chevron.left")
                .font(.title)
        }
        .background(
            GeometryReader { geo in
                Color.clear.preference(key: ViewWidthKey.self, value: geo.size.width)
            }
        )
    }
}
.onPreferenceChange(ViewWidthKey.self) { buttonWidth in
    // 计算总边距：按钮宽度 + 系统默认间距 + 安全区域内边距
    let totalMargin = buttonWidth + 16 + UIApplication.shared.windows.first?.safeAreaInsets.leading ?? 0
    // 将totalMargin传递给无限滚动组件
}

关键注意点 #

• 避免硬编码边距，优先用动态获取的系统值或视图宽度，适配不同设备和自定义导航栏
• 滚动动画的偏移量要适配新增的边距，保证滚动节奏不受影响
• 如果是双向来回滚动，需确保首尾的边距都能覆盖工具栏区域

内容的提问来源于stack exchange，提问作者southern_dev