เค้าโครง SwiftUI ภายใน VStack โดยใช้ ViewModifiers

ฉันมีมุมมองที่เรียบง่ายด้วยสองข้อความ body ของมันเป็นแบบนี้:

VStack {
    Text("One")
    Text("Two")
    Text("Three")
}

สิ่งนี้สร้างมุมมองเช่น:

รูปแบบที่มีอยู่

แต่สิ่งที่ฉันต้องการคือใช้เฉพาะตัวดัดแปลงสำหรับมุมมอง Text (เช่น ไม่ใช่ HStack กับ Spacers) ให้ได้เค้าโครงดังนี้:

รูปแบบที่ต้องการ

เป็นไปได้ไหมในปัจจุบัน? ฉันหวังว่าจะทำให้ Texts เต็มความกว้าง แล้วการใช้การจัดตำแหน่งข้อความก็ใช้ได้ แต่ยังไม่เข้าใจ


person KerrM    schedule 20.03.2020    source แหล่งที่มา


คำตอบ (3)


คือ... เนื่องจากไม่มีเงื่อนไขหรือข้อจำกัดเพิ่มเติมใดๆ โดยเพิ่งเพิ่มโค้ดสองบรรทัด

การสาธิตในหน้าตัวอย่าง (เส้นขอบสีน้ำเงินเป็นเพียงการเลือกในโค้ด)

สาธิต

    VStack {
        Text("One")
            .frame(maxWidth: .infinity, alignment: .leading)
        Text("Two")
        Text("Three")
            .frame(maxWidth: .infinity, alignment: .trailing)
    }
person Asperi    schedule 20.03.2020
comment
เยี่ยมเลย ขอบคุณ! คุณมองเห็นข้อเสียของการใช้สิ่งนี้หรือไม่? กล่าวคือ มันแปลกไหมที่ใช้การจัดแนวของเฟรมเพื่อจัดแนวข้อความ - person KerrM; 20.03.2020
comment
@KerrM ไม่ จริงๆ แล้วมันไม่ได้จัดแนวไม่ใช่ข้อความ (เช่น สตริง) แต่เป็นมุมมองทั้งหมดภายในกรอบที่ให้มา ดังนั้นหากคุณแทรกข้อความที่ยาวมาก ๆ ข้อความจะเติมและตัดตามปกติ นอกจากนี้เนื่องจากไม่มีการเปลี่ยนแปลงการวางแนวหรือเค้าโครงของฮาร์ดโค้ดจะถูกจัดการโดยอัตโนมัติ - person Asperi; 20.03.2020

ใช่ สิ่งนี้อาจเป็นไปได้ คุณสามารถกำหนดตัวแก้ไขได้เช่น:

extension View {
    func horizontalAlignment(_ alignment: HorizontalAlignment) -> some View {
        Group {
            if alignment == .leading {
                HStack {
                    self
                    Spacer()
                }
            } else if alignment == .trailing {
                HStack {
                    Spacer()
                    self
                }
            } else {
                self
            }
        }
    }
}

และใช้มันเหมือน:

VStack {
    Text("One")
        .horizontalAlignment(.leading)
    Text("Two")
        .horizontalAlignment(.center)
    Text("Three")
        .horizontalAlignment(.trailing)
}

แน่นอนว่าเป็นไปได้หลายวิธี

person cbjeukendrup    schedule 20.03.2020

วิธีหนึ่งคือเพียงตั้งค่าเฟรม:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("One")
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       alignment: .leading)
            Text("Two")
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       alignment: .center)
            Text("Three")
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       alignment: .trailing)

        }
    }
}
person atomoil    schedule 20.03.2020