查看不扩展到完整列表行宽 - SwiftUI

Question

我在列表中嵌入了视图，每个 List 项一个 View，但出于某种原因，View 只占据列表行的一小部分，而不是比填满整行。嵌入的 View 在 View 的预览中完全展开，所以我不确定为什么会这样。

列表View

import SwiftUI

struct AnnouncementsView: View{
    @Binding var announcements: [Announcement]
    @State var displayedMessage: String = ""
    @State var isDisplayingMessage: Bool = false
    
    static let sectionDateFormat: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "dd/MM/YYYY"
        return formatter
    }()
    var body: some View{
        //NavigationView{
        VStack{
            List($announcements){$announcement in
                AnnouncementView(announcement: $announcement)
            }
            Spacer()
        }
    }
}

列表项View

struct AnnouncementView: View{
    @Binding var announcement: Announcement
    @State private var sheetIsShowing: Bool = false
    static let sectionDateFormat: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "dd/MM/YYYY"
        return formatter
    }()
    var body: some View{
        HStack{
            Button(action: {
                sheetIsShowing = true
            }){
                if (!announcement.read){
                    Image(systemName: "exclamationmark.circle.fill")
                        .foregroundColor(.red)
                }
                Text(announcement.message)
                    .lineLimit(1)
                    .truncationMode(.tail)
                    .foregroundColor(.black)
                Spacer()
                Text("\(announcement.timestamp, formatter: Self.sectionDateFormat)")
                    .disabled(true)
            }
        }
        .padding()
        .sheet(isPresented:$sheetIsShowing){
            NavigationView{
                DetailedAnnouncementView(announcement: $announcement)
                    .navigationTitle(Text("\(announcement.timestamp, formatter: Self.sectionDateFormat)"))
                    .toolbar{
                        ToolbarItem(placement: .navigationBarLeading){
                            Button(action: {
                                announcement.read = true
                                sheetIsShowing = false
                            }){
                                Text("Mark as Read")
                            }
                        }
                        ToolbarItem(placement: .navigationBarTrailing){
                            Button(action: {
                                sheetIsShowing = false
                                announcement.read = false
                            }){
                                Text("Mark as Unread")
                            }
                        }
                    }
            }
        }
    }
}

我可能遗漏了一些非常基本的东西，但非常感谢任何帮助。

谢谢。

Answer 1

因此，如果没有提供 Stack，SwiftUI 似乎默认将 Button 的内容呈现为在 HStack 中。

但是，当在 List 中使用 Button 时，此默认行为变为默认设置，就好像它是 VStack 一样。（请注意，它仅在 List 内使用时发生。在 LazyVStack、ScrollView、ForEach 内使用时，默认 HStack 将保持不变）。

因此，为了确保 Button 的内容始终水平呈现，请通过将其内容显式嵌套在 HStack 中来指定它，而不是依赖于 Button' s "default" 行为（因为它现在似乎不一致）

所以，改变：

Button(action: ...) {
    //content
}

收件人：

Button(action: ...) {
    HStack {
        //content
    }
}

查看不扩展到完整列表行宽 - SwiftUI

View Not Expanding to Full List Line Width- SwiftUI

ios

swiftui