একটি ভিস্ট্যাকটি সুইফটআইআই-এ স্ক্রিনের প্রস্থ পূরণ করুন

Question 1

এই কোড দেওয়া:

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title)

            Text("Content")
                .lineLimit(nil)
                .font(.body)

            Spacer()
        }
        .background(Color.red)
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

এটি এই আন্তঃসংযোগের ফলাফল:

VStackলেবেল / পাঠ্য উপাদানগুলির পুরো প্রস্থের প্রয়োজন না হলেও আমি কীভাবে পর্দার প্রস্থটি পূরণ করতে পারি?

যে কৌশলটি আমি পেয়েছি তা হ'ল কাঠামোর মতো একটি খালি sert োকানোHStack :

VStack(alignment: .leading) {
    HStack {
        Spacer()
    }
    Text("Title")
        .font(.title)

    Text("Content")
        .lineLimit(nil)
        .font(.body)

    Spacer()
}

যা কাঙ্ক্ষিত নকশা দেয়:

একটি ভাল উপায় আছে কি?

Question 2

নিম্নলিখিত বিকল্পগুলির সাথে। ফ্রেম সংশোধক ব্যবহার করে দেখুন:

.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Hello World").font(.title)
            Text("Another").font(.body)
            Spacer()
        }.frame(minWidth: 0,
                maxWidth: .infinity,
                minHeight: 0,
                maxHeight: .infinity,
                alignment: .topLeading
        ).background(Color.red)
    }
}

এটি একটি নমনীয় ফ্রেম হিসাবে বর্ণিত হয়েছে ( ডকুমেন্টেশন দেখুন ), যা পুরো স্ক্রীনটি পূরণ করতে প্রসারিত হবে এবং যখন এটির অতিরিক্ত স্থান থাকবে এটি তার সামগ্রীগুলি এর অভ্যন্তরে কেন্দ্র করবে।

Question 3

একটি বিকল্প স্ট্যাকিং বিন্যাস যা কাজ করে এবং সম্ভবত কিছুটা স্বজ্ঞাত এটি হ'ল:

struct ContentView: View {
    var body: some View {
        HStack() {
            VStack(alignment: .leading) {
                Text("Hello World")
                    .font(.title)
                Text("Another")
                    .font(.body)
                Spacer()
            }
            Spacer()
        }.background(Color.red)
    }
}

Spacer()প্রয়োজনবোধে প্রয়োজনবস্তু সরানোর মাধ্যমে সামগ্রীটি সহজেই পুনরায় অবস্থান করতে পারে ।

Question 4

আরও ভাল উপায় আছে!

করতে VStackভরাট এটা পিতা বা মাতা প্রস্থ আপনি একটি ব্যবহার করতে পারেন GeometryReaderএবং ফ্রেম সেট। ( .relativeWidth(1.0)কাজ করা উচিত তবে আপাতদৃষ্টিতে দৃশ্যমান নয়)

struct ContentView : View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("test")
            }
                .frame(width: geometry.size.width,
                       height: nil,
                       alignment: .topLeading)
        }
    }
}

করতে VStackপ্রকৃত পর্দা আপনি ব্যবহার করতে পারেন প্রস্থ UIScreen.main.bounds.widthযখন ফ্রেম সেটিং পরিবর্তে একটি ব্যবহার GeometryReader, কিন্তু আমি মনে করুন আপনার সম্ভবত পিতা বা মাতা দৃশ্য প্রস্থ চেয়েছিলেন।

এছাড়াও, এইভাবে আপনার ব্যবধানটি যুক্ত না করার অতিরিক্ত সুবিধা রয়েছে VStackযা ঘটতে পারে (যদি আপনার স্পেসিং থাকে) যদি আপনি এটির HStackসাথে একটি Spacer()বিষয়বস্তু হিসাবে একটি যুক্ত করেন তবে VStack।

আপডেট - এটি একটি ভাল উপায় নয়!

গৃহীত উত্তরটি যাচাই করার পরে, আমি বুঝতে পারি যে গৃহীত উত্তরটি আসলে কাজ করে না! এটি প্রথম নজরে কাজ করে বলে মনে হচ্ছে, তবে আপনি যদি VStackসবুজ পটভূমি আপডেট করতে আপডেট করেন তবে দেখতে পাবেন VStackযে একই প্রস্থটি এখনও একই।

struct ContentView : View {
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                Text("Hello World")
                    .font(.title)
                Text("Another")
                    .font(.body)
                Spacer()
                }
                .background(Color.green)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
                .background(Color.red)
        }
    }
}

এর কারণ .frame(...)হল ভিউ হায়ারার্কিতে আসলেই অন্য একটি ভিউ যুক্ত করা হচ্ছে এবং সেই দৃশ্যটি স্ক্রীনটি পূরণ করে। তবে, VStackএখনও না।

আমার ইস্যুতেও এই সমস্যাটি একই রকম বলে মনে হচ্ছে এবং উপরের মত একই পদ্ধতির সাহায্যে পরীক্ষা করা যেতে পারে (এর আগে এবং পরে বিভিন্ন পটভূমি রঙ লাগানো .frame(...)actually একমাত্র উপায় যা VStackস্পষ্টতই ব্যবহার করতে হবে তা হল:

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            HStack{
                Text("Title")
                    .font(.title)
                Spacer()
            }
            Text("Content")
                .lineLimit(nil)
                .font(.body)
            Spacer()
        }
            .background(Color.green)
    }
}

Question 5

আপনার প্রয়োজন অনুসারে সুইফ্ট 5.2 এবং আইওএস 13.4 VStackদিয়ে আপনার শীর্ষস্থানীয় সীমাবদ্ধতা এবং একটি পূর্ণ আকারের ফ্রেমের সাথে সারিবদ্ধ করার জন্য আপনি নীচের একটি উদাহরণ ব্যবহার করতে পারেন ।

নোট করুন যে সমস্ত নীচে কোড স্নিপেটগুলি একই ডিসপ্লেতে ফলাফল দেয় তবে ভিউ হায়ারার্কি ডিবাগ করার সময় যে কার্যকর উপাদানগুলি উপস্থিত হতে পারে VStackতার সংখ্যা বা গ্যারান্টি দেয় না View।

1. `frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)`পদ্ধতি ব্যবহার করে

সবচেয়ে সহজ পদ্ধতির VStackসর্বাধিক প্রস্থ এবং উচ্চতা সহ আপনার ফ্রেম সেট করা এবং প্রয়োজনীয় প্রান্তিককরণটি এখানে প্রবেশ করাও frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:):

struct ContentView: View {

    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title)
            Text("Content")
                .font(.body)
        }
        .frame(
            maxWidth: .infinity,
            maxHeight: .infinity,
            alignment: .topLeading
        )
        .background(Color.red)
    }

}

বিকল্প হিসাবে, যদি আপনার কোডগুলির জন্য নির্দিষ্ট প্রান্তিককরণের সাথে সর্বাধিক ফ্রেম সেট Viewকরা আপনার কোড বেসের একটি সাধারণ প্যাটার্ন হয় তবে আপনি Viewএটির জন্য একটি এক্সটেনশন পদ্ধতি তৈরি করতে পারেন :

extension View {

    func fullSize(alignment: Alignment = .center) -> some View {
        self.frame(
            maxWidth: .infinity,
            maxHeight: .infinity,
            alignment: alignment
        )
    }

}

struct ContentView : View {

    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title)
            Text("Content")
                .font(.body)
        }
        .fullSize(alignment: .topLeading)
        .background(Color.red)
    }

}

2. `Spacer`প্রান্তিককরণ জোর করতে এস ব্যবহার

আপনি আপনার VStackপুরো আকারের ভিতরে এম্বেড করতে HStackপারেন এবং Spacerআপনার VStackশীর্ষস্থানীয় প্রান্তিককরণ জোর করতে পিছনে এবং নীচে ব্যবহার করতে পারেন :

struct ContentView: View {

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text("Title")
                    .font(.title)
                Text("Content")
                    .font(.body)

                Spacer() // VStack bottom spacer
            }

            Spacer() // HStack trailing spacer
        }
        .frame(
            maxWidth: .infinity,
            maxHeight: .infinity
        )
        .background(Color.red)
    }

}

৩. একটি `ZStack`এবং একটি পূর্ণ আকারের পটভূমি ব্যবহার করা`View`

এই উদাহরণটি দেখায় যে কীভাবে শীর্ষস্থানীয় প্রান্তিককরণ রয়েছে আপনার VStackভিতরে কীভাবে এম্বেড ZStackকরা যায়। Colorসর্বাধিক প্রস্থ এবং উচ্চতা সেট করতে দর্শনটি কীভাবে ব্যবহৃত হয় তা নোট করুন :

struct ContentView: View {

    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.red
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            VStack(alignment: .leading) {
                Text("Title")
                    .font(.title)
                Text("Content")
                    .font(.body)
            }
        }
    }

}

4. ব্যবহার `GeometryReader`

GeometryReaderনিম্নলিখিত ঘোষণা আছে :

একটি ধারক দর্শন যা এর সামগ্রীটিকে তার নিজস্ব আকার এবং স্থানাঙ্কিত স্থানের ক্রিয়া হিসাবে সংজ্ঞায়িত করে। [...] এই দর্শনটি তার প্যারেন্ট লেআউটে একটি নমনীয় পছন্দসই আকার প্রদান করে।

নীচের কোড স্নিপেটটি দেখায় যে কীভাবে শীর্ষ শীর্ষ সীমাবদ্ধতা এবং একটি পূর্ণ আকারের ফ্রেমের সাথে GeometryReaderআপনার সারিবদ্ধ করার জন্য VStack:

struct ContentView : View {

    var body: some View {
        GeometryReader { geometryProxy in
            VStack(alignment: .leading) {
                Text("Title")
                    .font(.title)
                Text("Content")
                    .font(.body)
            }
            .frame(
                width: geometryProxy.size.width,
                height: geometryProxy.size.height,
                alignment: .topLeading
            )
        }
        .background(Color.red)
    }

}

5. `overlay(_:alignment:)`পদ্ধতি ব্যবহার

আপনি যদি VStackকোনও বিদ্যমান পূর্ণ আকারের শীর্ষে শীর্ষস্থানীয় সীমাবদ্ধতার সাথে প্রান্তিককরণ করতে চান তবে আপনি পদ্ধতিটি Viewব্যবহার করতে পারেন overlay(_:alignment:):

struct ContentView: View {

    var body: some View {
        Color.red
            .frame(
                maxWidth: .infinity,
                maxHeight: .infinity
            )
            .overlay(
                VStack(alignment: .leading) {
                    Text("Title")
                        .font(.title)
                    Text("Content")
                        .font(.body)
                },
                alignment: .topLeading
            )
    }

}

প্রদর্শন:

Question 6

ইস্যুটি সমাধান করার সবচেয়ে সহজ উপায়টি হ'ল একটি জেডস্ট্যাক + .এডেজস আইজিনেজিংসেফএরিয়া (। সমস্ত) ব্যবহার করা by

struct TestView : View {

    var body: some View {
        ZStack() {
            Color.yellow.edgesIgnoringSafeArea(.all)
            VStack {
                Text("Hello World")
            }
        }
    }
}

Question 7

আপনি এটি ব্যবহার করে করতে পারেন GeometryReader

জ্যামিতি রিডার

কোড:

struct ContentView : View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
               Text("Turtle Rock").frame(width: geometry.size.width, height: geometry.size.height, alignment: .topLeading).background(Color.red)
            }
        }
    }
}

আপনার ফলাফল যেমন:

Question 8

এটা ব্যবহার কর

.edgesIgnoringSafeArea(.all)

Question 9

একটি ভাল সমাধান এবং "সংকোচন" ছাড়াই ভুলে যাওয়া ZStack

ZStack(alignment: .top){
    Color.red
    VStack{
        Text("Hello World").font(.title)
        Text("Another").font(.body)
    }
}

ফলাফল:

Question 10

এর আরও একটি বিকল্প হ'ল একটি এর অভ্যন্তরীণ মতামতগুলির মধ্যে একটি রাখুন HStackএবং এর Spacer()পরে একটি স্থান দিন:

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {

            HStack {
                Text("Title")
                    .font(.title)
                    .background(Color.yellow)
                Spacer()
            }

            Text("Content")
                .lineLimit(nil)
                .font(.body)
                .background(Color.blue)

            Spacer()
            }

            .background(Color.red)
    }
}

ফলাফল:

Question 11

এটিই আমার পক্ষে কাজ করেছে ( ScrollView(alচ্ছিক) যাতে আরও বেশি সামগ্রীতে প্রয়োজনে যোগ করা যায়, পাশাপাশি কেন্দ্রিক বিষয়বস্তু):

import SwiftUI

struct SomeView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(Axis.Set.horizontal) {
                HStack(alignment: .center) {
                    ForEach(0..<8) { _ in
                        Text("🥳")
                    }
                }.frame(width: geometry.size.width, height: 50)
            }
        }
    }
}

// MARK: - Preview

#if DEBUG
struct SomeView_Previews: PreviewProvider {
    static var previews: some View {
        SomeView()
    }
}
#endif

ফলাফল

Question 12

আমি জানি এটি সবার জন্য কার্যকর হবে না তবে আমি এটি আকর্ষণীয় বলে মনে করেছি যে কেবলমাত্র একটি ডিভাইডার যুক্ত করা এর জন্য সমাধান করে।

struct DividerTest: View {
var body: some View {
    VStack(alignment: .leading) {
        Text("Foo")
        Text("Bar")
        Divider()
    }.background(Color.red)
  }
}

Question 13

এটি কোডের একটি কার্যকর বিট:

extension View {
    func expandable () -> some View {
        ZStack {
            Color.clear
            self
        }
    }
}

.expandable()পরিবর্তকের সাথে এবং ছাড়া ফলাফলের তুলনা করুন :

Text("hello")
    .background(Color.blue)

-

Text("hello")
    .expandable()
    .background(Color.blue)

Question 14

আপনি পিতামাতাকে পূরণ করতে একটি কার্যকর এক্সটেনশনে জ্যামিতিরিডার ব্যবহার করতে পারেন

extension View {
    func fillParent(alignment:Alignment = .center) -> some View {
        return GeometryReader { geometry in
            self
                .frame(width: geometry.size.width,
                       height: geometry.size.height,
                       alignment: alignment)
        }
    }
}

অনুরোধ করা উদাহরণ ব্যবহার করে, আপনি পাবেন

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title)

            Text("Content")
                .lineLimit(nil)
                .font(.body)
        }
        .fillParent(alignment:.topLeading)
        .background(Color.red)
    }
}

(মনে রাখবেন স্পেসারের আর দরকার নেই)

Question 15

লগইন পৃষ্ঠা ডিজাইন ব্যবহার করে SwiftUI

import SwiftUI

struct ContentView: View {

    @State var email: String = "william@gmail.com"
    @State var password: String = ""
    @State static var labelTitle: String = ""


    var body: some View {
        VStack(alignment: .center){
            //Label
            Text("Login").font(.largeTitle).foregroundColor(.yellow).bold()
            //TextField
            TextField("Email", text: $email)
                .textContentType(.emailAddress)
                .foregroundColor(.blue)
                .frame(minHeight: 40)
                .background(RoundedRectangle(cornerRadius: 10).foregroundColor(Color.green))

            TextField("Password", text: $password) //Placeholder
                .textContentType(.newPassword)
                .frame(minHeight: 40)
                .foregroundColor(.blue) // Text color
                .background(RoundedRectangle(cornerRadius: 10).foregroundColor(Color.green))

            //Button
            Button(action: {

            }) {
                HStack {
                    Image(uiImage: UIImage(named: "Login")!)
                        .renderingMode(.original)
                        .font(.title)
                        .foregroundColor(.blue)
                    Text("Login")
                        .font(.title)
                        .foregroundColor(.white)
                }


                .font(.headline)
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
                .padding(.horizontal, 20)

                .frame(width: 200, height: 50, alignment: .center)
            }
            Spacer()

        }.padding(10)

            .frame(minWidth: 0, idealWidth: .infinity, maxWidth: .infinity, minHeight: 0, idealHeight: .infinity, maxHeight: .infinity, alignment: .top)
            .background(Color.gray)

    }

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

একটি ভিস্ট্যাকটি সুইফটআইআই-এ স্ক্রিনের প্রস্থ পূরণ করুন

1. frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)পদ্ধতি ব্যবহার করে

2. Spacerপ্রান্তিককরণ জোর করতে এস ব্যবহার

৩. একটি ZStackএবং একটি পূর্ণ আকারের পটভূমি ব্যবহার করাView

4. ব্যবহার GeometryReader

5. overlay(_:alignment:)পদ্ধতি ব্যবহার