無法在 SwiftUI 中獲取正確的視圖 position

Question

我試圖獲得 Button 的 midX position，但它總是給我意想不到的結果。 我試過使用.global, .local。 and.named 坐標空間，但它仍然不起作用。 也許還有另一種方法可以在沒有 GeometryReader 的情況下獲取 UI 元素的坐標曲線中心應該位於所選按鈕的中心。

struct CoreTabBar: View {
@State var selectedTab: Tab = .home
@State private var xAxis: CGFloat = 0

private let home: AnyView
private let search: AnyView
private let media: AnyView

init(
    home: AnyView,
    search: AnyView,
    media: AnyView
) {
    self.home = home
    self.search = search
    self.media = media
}

var body: some View {
    ZStack(alignment: .center) {
        TabView(selection: $selectedTab) {
            switch selectedTab {
            case .home:
                home
                    .ignoresSafeArea()
            case .search:
                search
                    .ignoresSafeArea()
            case .media:
                media
                    .ignoresSafeArea()
            }
        }
        VStack {
            Spacer()
            HStack(spacing: 0) {
                ForEach(Tab.allCases, id: \.self) { tab in
                    if tab == .search { Spacer(minLength: 0) }
                    
                    GeometryReader { proxy in
                        Button {
                            selectedTab = tab
                            xAxis = proxy.frame(in: .named("TabBar")).midX
                        } label: {
                            Image(systemName: tabImage(tab))
                                .resizable()
                                .renderingMode(.template)
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 25, height: 25)
                                .foregroundColor(tab == selectedTab ? Color.blue : Color.gray)
                                .coordinateSpace(name: "Button")
                        }
                        
                        .onAppear {
                        }
                    }
                    .frame(width: 25, height: 25)
            
                    if tab == .search { Spacer(minLength: 0) }
                }
            }
            .coordinateSpace(name: "TabBar")
            .padding(.horizontal, 60)
            .padding(.vertical)
            .background(Color.white.clipShape(TabBarShape(xAxis: self.xAxis)))
            .cornerRadius(50)
            .padding(.horizontal, idiomIsPhone() ? nil : tabBarHorizontalPaddingForIpad())
            Spacer()
                .frame(height: 5)
        }
    }
}

Answer 1

它似乎適用於.global 坐標。 請參閱下面的演示。 可能在TabBarShape中使用 xAxis 有問題...無法判斷，因為您沒有共享它。

import SwiftUI

enum Tab: CaseIterable {
    case home
    case search
    case media
}

struct ContentView: View {
    @State var selectedTab: Tab = .home
    @State private var xAxis: CGFloat = 0
    
    private let home = Text("home")
    private let search = Text("search")
    private let media = Text("media")
        
    var body: some View {
        ZStack(alignment: .center) {
            TabView(selection: $selectedTab) {
                switch selectedTab {
                case .home:
                    home
                        .ignoresSafeArea()
                case .search:
                    search
                        .ignoresSafeArea()
                case .media:
                    media
                        .ignoresSafeArea()
                }
            }
            VStack {
                Spacer()
                HStack(spacing: 0) {
                    ForEach(Tab.allCases, id: \.self) { tab in
                        if tab == .search { Spacer(minLength: 0) }
                        
                        GeometryReader { proxy in
                            Button {
                                withAnimation {
                                    selectedTab = tab
                                    xAxis = proxy.frame(in: .global).midX // .global should work fine
                                }
                            } label: {
                                Image(systemName: "house")
                                    .resizable()
                                    .renderingMode(.template)
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 25, height: 25)
                                    .foregroundColor(tab == selectedTab ? Color.blue : Color.gray)
                            }
                            .onAppear {
                                if tab == selectedTab {
                                    xAxis = proxy.frame(in: .global).midX // set for initial selection
                                }
                            }
                        }
                        .frame(width: 25, height: 25)
                        
                        if tab == .search { Spacer(minLength: 0) }
                    }
                }
                .padding(.horizontal, 60)
                .padding(.vertical)
                .background(
                    ZStack {
                        Color.green
                    Circle().fill(.white).frame(width: 50)
                        .position(x: xAxis) // applied here
                    }
                    )
                .cornerRadius(50)
//                .padding(.horizontal, idiomIsPhone() ? nil : tabBarHorizontalPaddingForIpad())
                Spacer()
                    .frame(height: 5)
            }
        }
    }
}