SwiftUI WidgetKit：如何将视图锚定到顶部

Question

我正在尝试使用 SwiftUI 和 WidgetKit 布局 tableView，并希望获得与 Apple 的 Notes 小部件类似的结果。

我当前的实现成功地在.systemLarge小部件中布置了视图，但在.systemMedium小部件中却没有。我想将视图固定到小部件的顶部，以便“收藏夹”的标题在.systemMedium.

struct PlacesWidgetEntryView : View {
    var entry: Provider.Entry

    let places = [
        Place(name: "Place 1", imageName: "baseline_star_black_24pt"),
        Place(name: "Place 2", imageName: "baseline_star_black_24pt"),
        Place(name: "Place 3", imageName: "baseline_star_black_24pt"),
        Place(name: "Place 4", imageName: "baseline_star_black_24pt"),
        Place(name: "Place 5", imageName: "baseline_star_black_24pt"),

    ]
    
    var body: some View {
        VStack {
            //Header
            HStack {
                Text("FAVOURITES")
                    .bold()
                    .frame(height: 8)
                Spacer()
            }
            .padding()
            .background(Color.blue)

            //TableView
            LazyVStack {
                ForEach(places, id: \.self) { place in
                    PlaceRow(place: place)
                }
            }
            Spacer()
        }
    }
}

struct PlaceRow: View {
    let place: Place
    
    var body: some View {
        HStack {
            Text(place.name)
                .font(.body)
            Spacer()
            Image(place.imageName)
                .resizable()
                .frame(width: 28, height: 28, alignment: .center)
        }
        .padding(.horizontal)
        .padding(.vertical, 4)
    }
}

实施成果：

以上是.systemLarge，这是好的，并且符合我的期望。

以上是.systemMedium，这不是我所期望的。我希望看到“收藏夹”固定在 widgetView 的顶部，并且可能会溢出到底部的 tableView。

Answer 1

这是可能的布局解决方案。使用 Xcode 12 进行测试。

var body: some View {
    VStack(spacing: 0) {
        HStack {
            Text("FAVOURITES")
                .bold()
                .frame(height: 8)
            Spacer()
        }
        .padding()
        .background(Color.blue)
        
        Color.clear
            .overlay(
                LazyVStack {
                    ForEach(places, id: \.self) { place in
                        PlaceRow(place: place)
                    }
                },
                alignment: .top)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}