【问题标题】:SwiftUI multiline text always truncating at 1 lineSwiftUI 多行文本总是在 1 行截断
【发布时间】:2019-10-29 03:51:53
【问题描述】:

我正在尝试创建一个选项列表供用户选择。调试预览显示一般外观。我的问题是在MultipleChoiceOption 中将nil 传递给.lineLimit 不允许文本超过1 行。我该如何纠正这个问题?

struct Card<Content: View> : View {
    private let content: () -> Content
    init(content: @escaping () -> Content) {
        self.content = content
    }

    private let shadowColor = Color(red: 69 / 255, green: 81 / 255, blue: 84 / 255, opacity: 0.1)

    var body: some View {

        ZStack {
            self.content()
                .padding()
                .background(RoundedRectangle(cornerRadius: 22, style: .continuous)
                    .foregroundColor(.white)
                    .shadow(color: shadowColor, radius: 10, x: 0, y: 5)
            )
            }
            .aspectRatio(0.544, contentMode: .fit)
            .padding()
    }
}

struct MultipleChoiceOption : View {
    var option: String
    @State var isSelected: Bool

    var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(self.isSelected ? .gray : .white)
                .cornerRadius(6)
                .border(Color.gray, width: 1, cornerRadius: 6)
            Text(self.option)
                .font(.body)
                .foregroundColor(self.isSelected ? .white : .black)
                .padding()
                .multilineTextAlignment(.leading)
                .lineLimit(nil)
        }
    }
}

struct MultipleChoice : View {
    @State var selectedIndex = 1

    var options: [String] = [
        "Hello World",
        "How are you?",
        "This is a longer test This is a longer test This is a longer test This is a longer test This is a longer test This is a longer test"
    ]

    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                VStack(alignment: .leading, spacing: 12) {
                    ForEach(self.options.indices) { i in
                        MultipleChoiceOption(option: self.options[i],
                                             isSelected: i == self.selectedIndex)
                            .tapAction { self.selectedIndex = i }


                    }
                }
                    .frame(width: geometry.size.width)
            }
        }
            .padding()
    }
}

struct MultipleChoiceCard : View {
    var question: String = "Is this a question?"

    var body: some View {
        Card {
            VStack(spacing: 30) {
                Text(self.question)
                MultipleChoice()
            }
        }
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
//        NavigationView {
            VStack {
                MultipleChoiceCard()
                Button(action: {

                }) {
                    Text("Next")
                        .padding()
                        .foregroundColor(.white)
                        .background(Color.orange)
                        .cornerRadius(10)
                }
            }
                .padding()
//                .navigationBarTitle(Text("Hello"))
//        }
    }
}
#endif

【问题讨论】:

    标签: swiftui


    【解决方案1】:

    请查看 Xcode 11 GM 的答案:

    https://stackoverflow.com/a/56604599/30602

    总结:添加 .fixedSize(horizontal: false, vertical: true) — 这在我的用例中对我有用。

    【讨论】:

      【解决方案2】:

      修饰符fixedSize() 防止截断多行文本。

      HStack 内部

      Text("text").fixedSize(horizontal: false, vertical: true)
      

      VStack 内部

      Text("text").fixedSize(horizontal: true, vertical: false)
      

      【讨论】:

        【解决方案3】:

        目前 SwiftUI 中存在一个错误,导致 nil lineLimit 不起作用。

        如果你现在必须解决这个问题,你可以包装一个 UITextField: https://icalvin.dev/post/403

        【讨论】:

        • 这并不总是一个错误。重新排序和重新组织视图的布局可以解决问题,但当然这通常并不理想。
        【解决方案4】:

        我遇到了同样的问题并使用了这个解决方法:

        添加修饰符: .frame(idealHeight: .infinity)

        【讨论】:

        • 担心这个解决方案对我来说会崩溃。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-11-21
        • 2020-04-18
        • 2014-06-17
        • 2018-02-07
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多