是否可以使用 .symbolEffect 对 TabView 项目进行动画处理？

Question

我有一个

TabView

并且想要为其中一个项目制作动画

@State var isLoading = false

// ...

TabView {
    Color.blue
        .tabItem {
            Image(systemName: "star")
                .symbolEffect(.pulse, options: .repeating, isActive: isLoading)
        }
}

可以用

.symbolEffect

做到这一点吗？这适用于没有选项卡项目，但使用它则没有任何反应。

Answer 1

您需要找到一些解决方法。我现在已经玩了一下并找到了以下 3 个解决方案：

struct ContentView: View {
    
    @State private var tabSelection: String = "star"
    
    var body: some View {
        NavigationStack {
            TabView(selection: $tabSelection) {
                Text("Person")
                    .tag("person")
                
                Text("Star")
                    .tag("star")
            }
            .safeAreaInset(edge: .bottom) {
                HStack(spacing: 50) {
                    Image(systemName: "person")
                        .symbolEffect(.pulse, options: .repeating, isActive: true)
                        .font(.title2)
                        .foregroundStyle(.blue)
                        .padding(.bottom)
                        .onTapGesture {
                            tabSelection = "person"
                        }
                    
                    Image(systemName: "star")
                        .symbolEffect(.pulse, options: .repeating, isActive: true)
                        .font(.title2)
                        .foregroundStyle(.blue)
                        .padding(.bottom)
                        .onTapGesture {
                            tabSelection = "star"
                        }
                }
            }
        }
        
    }
}

基本上，您需要使用

safeAreaInsets

修饰符构建自己的选项卡栏，并将项目放置在

bottom

处，同时还处理那里的用户交互。这样您就可以保留

symbolEffect

动画。

其他可能的解决方案：

您也可以使用

toolbar

修饰符并将项目放置在

bottomBar

中，但我发现这在放置项目时给您带来了很少的灵活性空间。

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        Image(systemName: "person")
           .symbolEffect(.pulse, options: .repeating, isActive: true)
           .font(.title2)
           .foregroundStyle(.blue)
           .padding(.bottom)
           .onTapGesture {
               tabSelection = "person"
           }
      }
            
      ToolbarItem(placement: .bottomBar) {
          Image(systemName: "star")
             .symbolEffect(.pulse, options: .repeating, isActive: true)
             .font(.title2)
             .foregroundStyle(.blue)
             .padding(.bottom)
             .onTapGesture {
                tabSelection = "star"
             }
        }
    }

第三种解决方案涉及在

overlay

的底部应用

TabView

，如下所示：

.overlay(alignment: .bottom) {
    HStack(spacing: 50) {
        Image(systemName: "person")
             .symbolEffect(.pulse, options: .repeating, isActive: true)
             .font(.title2)
             .foregroundStyle(.blue)
             .padding(.bottom)
             .onTapGesture {
                 tabSelection = "person"
             }
                
         Image(systemName: "star")
            .symbolEffect(.pulse, options: .repeating, isActive: true)
            .font(.title2)
            .foregroundStyle(.blue)
            .padding(.bottom)
            .onTapGesture {
               tabSelection = "star"
            }
       }
 }

让我知道您对这 3 个解决方案的想法！