Настройка фоновой вкладки в SwiftUI на основе смещения элемента - PullRequest
Новая
       93

Настройка фоновой вкладки в SwiftUI на основе смещения элемента

0 голосов
/ 27 апреля 2020

Я пытаюсь установить фон панели вкладок для заполнения значков отступом, который касается средней точки заполненной камеры и нижней части экрана. Я оставляю код, чтобы вы могли видеть, что происходит. Я попытался установить .ignoringsafearea в .top и установить вертикальный отступ для HStack, но я не думаю, что это лучший способ сделать это, потому что если значок будет масштабироваться в зависимости от устройства, то заполнение не будет придерживаться середина левой кнопки. 

import SwiftUI

struct ContentView: View {
@State var index = 0

var body: some View {
    VStack {
        Spacer()

        CustomTabBar(index: self.$index)
    }
    .background(Color.red.edgesIgnoringSafeArea(.all))
}
}

struct CustomTabBar: View {
@Binding var index: Int
var yDistanceHomeButton = -25

var body: some View {
    ZStack {
        HStack {

            // Home tab
            Button(action: {
                self.index = 0
            }) {
                // Content
                Image(systemName: self.index == 0 ? "video.fill" : "video.slash")
                    .renderingMode(.original)
            }
            .foregroundColor(Color.black.opacity(self.index == 0 ? 1 : 0.1))
            .offset(y: CGFloat(yDistanceHomeButton))

            Spacer(minLength: 0)

            // 1 tab
            Button(action: {
                self.index = 1
            }) {
                // Content
                Image(systemName: self.index == 1 ? "video.fill" : "video.slash")
                    .renderingMode(.original)
            }
            .foregroundColor(Color.black.opacity(self.index == 1 ? 1 : 0.1))

            Spacer(minLength: 0)

            // 2 tab
            Button(action: {
                self.index = 2
            }) {
                // Content
                Image(systemName: self.index == 2 ? "video.fill" : "video.slash")
                    .renderingMode(.original)
            }
            .foregroundColor(Color.black.opacity(self.index == 2 ? 1 : 0.1))

            Spacer(minLength: 0)

            // 3 tab
            Button(action: {
                self.index = 3
            }) {
                // Content
                Image(systemName: self.index == 3 ? "video.fill" : "video.slash")
                    .renderingMode(.original)
            }
            .foregroundColor(Color.black.opacity(self.index == 3 ? 1 : 0.1))
        }
        .padding(.horizontal, 40)
        .background(Color.white)
    }
}
}

Заранее спасибо!

...