मैं स्विफ्टयूआई के साथ एक इंस्टाग्राम जैसा यूआई बनाने की कोशिश कर रहा हूं, और चूंकि मैं TabView में टैब तत्वों का आकार बदलने में सक्षम नहीं था, इसलिए मैंने इसके बजाय एक साधारण CustomTabView लिखने का फैसला किया। लेकिन मैं इसके शीर्ष पर एक पैडिंग के साथ समाप्त होता हूं और मुझे समझ में नहीं आता क्यों। यहाँ कोड है:

struct ContentView: View {
    @State private var selectedIndex: Int = 0
    
    var body: some View {
        VStack {
            switch selectedIndex {
            case 0:
                Color.blue
            case 1:
                Color.yellow
            case 2:
                Color.red
            case 3:
                Color.orange
            default:
                Color.green
            }
            CustomTabView(selectedIndex: $selectedIndex)
        }
    }
}

struct CustomTabView: View {
    @Binding var selectedIndex: Int
    
    var body: some View {
        VStack {
            Divider()
            HStack {
                Button(action: {
                    selectedIndex = 0
                }, label: {
                    Image("HomeIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                })
                Spacer()
                Button(action: {
                    selectedIndex = 1
                }, label: {
                    Image("PlayIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                })
                Spacer()
                Button(action: {
                    selectedIndex = 2
                }, label: {
                    Image("AddIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                })
                Spacer()
                Button(action: {
                    selectedIndex = 3
                }, label: {
                    Image("HeartIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                })
                Spacer()
                Button(action: {
                    selectedIndex = 4
                }, label: {
                    Image("ProfileIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                        .cornerRadius(15)
                })
            }
            .padding(.horizontal, 24)
            .padding(.top, 4)
        }
        .background(Color.white)
    }
}

मुझे जो परिणाम मिल रहा है:

enter image description here

मैं क्या गलत कर रहा हूं?

आपके सहयोग के लिए धन्यवाद

1
Another Dude 27 अक्टूबर 2020, 18:06

3 जवाब

सबसे बढ़िया उत्तर

अगर समस्या ब्लू बॉक्स और डिवाइडर के बीच गैप है, तो VStack के स्पेस को 0 पर सेट करने का प्रयास करें:

VStack(spacing: 0) {
    ...
}
2
rob mayoff 27 अक्टूबर 2020, 18:48

शीर्ष स्थान

यह है ="nofollow noreferrer">सुरक्षित क्षेत्र। आप इसे इस संशोधक से अनदेखा कर सकते हैं:

.ignoresSafeArea()

इसे उस दृश्य पर लागू करें जिसे आप सुरक्षित क्षेत्र से आगे बढ़ाना चाहते हैं, उदाहरण के लिए:

Color.blue
    .ignoresSafeArea(.container, edges: .top)

निचला स्थान

यह VStack की दूरी है। इसे 0 पर सेट करके इससे छुटकारा पाएं:

VStack(spacing: 0) {
    ,,,
}
1
Mojtaba Hosseini 27 अक्टूबर 2020, 18:54

ये कोशिश करें

Image("background").resizable()
                   .scaledToFill()
                   .clipped()
                   .edgesIgnoringSafeArea([.top])
0
a.Li 30 जिंदा 2021, 00:45