SwiftUI - 基于设备的自定义 TabBar 高度答案

【问题标题】：SwiftUI - custom TabBar height based on deviceSwiftUI - 基于设备的自定义 TabBar 高度
【发布时间】：2020-10-14 22:07:12
【问题描述】：

我正在尝试根据设备设置自定义 TabBar 的高度，我的代码：

struct MyTabBar: View {
    @Binding var index: Int

    var body: some View {
        HStack {
            Button(action: {
                self.index = 0
            }) {
                Image(ImageText.iconHome.image)
            }

            Spacer(minLength: 0)

            Button(action: {
                self.index = 1
            }) {
                Image(ImageText.iconBell.image)
            }

            Spacer(minLength: 0)

            Button(action: {
                self.index = 2
            }) {
                Image(ImageText.iconAdd.image)
            }

            Spacer(minLength: 0)

            Button(action: {
                self.index = 3
            }) {
                Image(ImageText.iconSearch.image).foregroundColor(Color.red)
            }

            Spacer(minLength: 0)

            Button(action: {
                self.index = 4
            }) {
                Image(ImageText.iconHamburger.image)
            }

        }.padding(.horizontal, 26).frame(height: 56)
    }
}

如果设备有缺口，我如何将自定义 TabBar 设置为更高的高度？ SwiftUI 有什么可以在这里有用的吗？

【问题讨论】：

标签： swift swiftui tabbar

【解决方案1】：

您可以使用GeometryReader 元素访问安全区域插图，并使用.safeAreaInsets.bottom 将其添加为填充（请注意，Xcode 自动完成功能几乎永远不会对GeometryProxy 属性起作用）：

var body: some View {
    GeometryReader { proxy in
        VStack {
            // Content goes here
            Spacer()

            // Custom tab bar
            HStack {
                Spacer()
                Button(action: {}) {
                    Image(systemName: "house.fill")
                    .padding()
                }
                Spacer()
                Button(action: {}) {
                    Image(systemName: "house.fill")
                    .padding()
                }
                Spacer()
                Button(action: {}) {
                    Image(systemName: "house.fill")
                    .padding()
                }
                Spacer()
                Button(action: {}) {
                    Image(systemName: "house.fill")
                    .padding()
                }
                Spacer()
            }
            .padding(.bottom, proxy.safeAreaInsets.bottom)
            .background(Color.red)

        }
    }.edgesIgnoringSafeArea(.bottom)
}

【讨论】：