List/TabView边缘滚动动画圆圈叫什么？如何修改滚动溢出指示器颜色？

嘿，刚好对这个问题很熟悉，给你详细说明下：

官方组件名称 #

这个滚动到边缘时出现的蓝色动画圆圈，官方正式名称是Scroll Bounce Indicator（滚动弹跳指示器）。它是UIScrollView（以及基于它衍生的UITableView、UITabBar，对应SwiftUI里的List、TabView这类滚动容器）自带的视觉反馈元素，目的是告诉用户已经滚到内容的边界啦。

修改指示器颜色的方法 #

下面分SwiftUI和UIKit两种常用场景来教你怎么改：

1. SwiftUI 场景

• 全局统一修改（整个App生效）
  在你的App结构体的初始化方法里，通过修改系统控件的全局外观来实现，代码如下：

  @main
  struct YourApp: App {
      init() {
          // 给List设置自定义弹跳指示器颜色
          UITableView.appearance().bounceIndicatorColor = .systemPink
          // 给ScrollView、TabView设置自定义颜色
          UIScrollView.appearance().bounceIndicatorColor = .teal
      }
      
      var body: some Scene {
          WindowGroup {
              ContentView()
          }
      }
  }
  

• 局部单独修改（仅对某个视图生效）
  如果你只想让某个特定的List或ScrollView用自定义颜色，可以结合onAppear和外观的容器限定来实现，避免影响其他同类型视图：

  // 先定义一个空的容器视图用来做限定
  struct CustomListContainer: ViewModifier {
      func body(content: Content) -> some View {
          content
      }
  }
  
  // 在目标List里使用
  List {
      ForEach(0..<10) { index in
          Text("Item \(index)")
      }
  }
  .modifier(CustomListContainer())
  .onAppear {
      UITableView.appearance(whenContainedInInstancesOf: [CustomListContainer.self]).bounceIndicatorColor = .orange
  }
  

2. UIKit 场景

直接操作对应滚动视图的bounceIndicatorColor属性就搞定：

• 针对UITableView（也就是SwiftUIList的底层实现）：

  override func viewDidLoad() {
      super.viewDidLoad()
      tableView.bounceIndicatorColor = .purple
  }
  

• 针对普通UIScrollView：

  override func viewDidLoad() {
      super.viewDidLoad()
      scrollView.bounceIndicatorColor = .darkGray
  }
  

• 针对TabView对应的UITabBarController滚动视图：

  override func viewDidLoad() {
      super.viewDidLoad()
      // 找到TabBar里的滚动视图并修改颜色
      if let scrollView = view.subviews.compactMap({ $0 as? UIScrollView }).first {
          scrollView.bounceIndicatorColor = .yellow
      }
  }
  

小提醒：bounceIndicatorColor这个属性是iOS 13之后才有的，如果你的项目需要兼容iOS 12及更早版本，就得用自定义绘制或者第三方库来模拟这个效果啦。

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