使用 SwiftUI 展開/折疊文本

Question

我有一個像這樣的 SwiftUI 視圖：

var body: some View {
    
    VStack(alignment: .leading) {
        
        Text(message)
            .font(.light16)
            .foregroundColor(.black)
            .multilineTextAlignment(.leading)
            .padding(.bottom, 8)

        ...

    }
}

此消息有時可能非常大。 我希望在這種情況下，當文本組件高於 200 像素（例如）時，會出現一個展開/折疊按鈕，因此用戶可以閱讀較短版本的消息（200 像素）或完整的消息（其全高）。 像這樣的東西：

var body: some View {

  VStack(alignment: .leading) {

    Text(message)
        .font(.light16)
        .foregroundColor(.black)
        .multilineTextAlignment(.leading)
        .padding(.bottom, 8)

    Button {
                self.isCollapsed = !self.isCollapsed
                // expand or collapse the Text
            } label: {
                let title = self.isCollapsed ? "expand text" : "collapse text"
                Text(title)
                    .font(.bold14)
                    .foregroundColor(Color.blue)
                    .multilineTextAlignment(.leading)
                    .padding(.bottom, 8)
            }

     }

     ...
 }

我在其他場合使用過 GeometryReader 和代理，但我不知道如何在這種情況下使用它。 我怎么能得到這個功能？

Answer 1

你想要的是這樣的嗎？

struct TestView: View {
@State var isCollapsed = true

var body: some View {

    VStack(alignment: .leading) {

        ScrollView(.vertical, showsIndicators: true) {
            Text("Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum")
                .font(.title3)
                .foregroundColor(.black)
                .multilineTextAlignment(.leading)
                .padding(.bottom, 8)
        }
        .frame(height: isCollapsed ? 200 : 500, alignment: .leading)

        Button {
            self.isCollapsed = !self.isCollapsed
        } label: {
            let title = self.isCollapsed ? "expand text" : "collapse text"
            Text(title)
                .font(.callout)
                .foregroundColor(Color.blue)
                .multilineTextAlignment(.leading)
                .padding(.bottom, 8)
        }

        Spacer()

    }

}

}