Question

我想在新闻源上创建一个 查看更多... 功能，就像Facebook一样。 SwiftUI列表包含行，一行由VStack（HStack（用户名，发布时间），Text（默认情况下仅显示2行，并且消耗掉以显示所有内容）显示）组成，最后是一个具有自定义大小的图像。能够实现切换并将lineLimit设置为nil来反映这一点，但是问题是顶部HStack在行的高度之外并且隐藏在上一行的后面。我使用了绑定变量来触发视图刷新，但是结果

Answer 1

这是一个有效的示例，说明如何使用ScrollView和一个简单的struct来代表行：

import SwiftUI

struct FeedList: View {
    var body: some View {
        ScrollView {
            ForEach(1...50, id: \.self) { item in
                VStack {
                    FeedRow()
                    Divider()
                }
            }
        }
    }
}

struct FeedRow: View {

    @State var value: Bool = false

    var body: some View {
        VStack {
            HStack {
                Text("Username")
                Text("17:17h")
            }
            .padding(10)
            Text("I would like to create a See more... feature on the news feed, pretty much like Facebook. The SwiftUI list has rows, a row is composed of a VStack of (HStack (username, post time), Text (showing only 2 lines by default and expendable to show all of it is toggled) and finally an image with custom size. I was able to implement the toggle and set lineLimit to nil to reflect that but the problem is that the top HStack is outside the height of the row and hidden behind the previous row. I used a binding variable to trigger the views to refresh but ho results.")
                .fixedSize(horizontal: false, vertical: true)
                .lineLimit(self.value ? nil : 2)
                .padding(.horizontal, 10)
            HStack {
                Spacer()
                Button(action: {
                    withAnimation {
                        self.value.toggle()
                    }
                }, label: {
                    if self.value {
                        Text("show less")
                    } else {
                        Text("show more")
                    }
                }).padding(.horizontal, 10)
            }
        }
        .animation(.easeInOut)
    }
}

struct ContentView: View {

    var body: some View {
        FeedRow()
    }

}

它仍然存在一些问题，但希望对您有所帮助！

点击文字以显示所有内容

1 个答案: