SwiftUI WidgetKit:如何将视图锚定到顶部 [英] SwiftUI WidgetKit: How to anchor views to the top

问题描述

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

I am attempting to layout a tableView using SwiftUI and WidgetKit and would like to achieve a similar result of that as the Apple's Notes widget.

我当前的实现成功地在 .systemLarge 小部件中布置了视图，但没有在 .systemMedium 小部件中布置视图.我想将视图固定在窗口小部件的顶部，以使"FAVOURITES"的标头在 .systemMedium 中可见.

My current implementation succeeds in laying out the view in the .systemLarge widget, but not in the .systemMedium widget. I would like to pin the view to the top of the widget, such that the header of "FAVOURITES" is visible in the .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 ，这很好，而且符合我的期望.

The above is .systemLarge, which is good, and as per what I'm expecting.

上面是 .systemMedium ，这不是我期望的.我希望看到收藏夹"锚定到widgetView的顶部，并且tableView可能溢出至底部.

The above is .systemMedium, which is not what I'm expecting. I would like to see "Favourites" anchored to the top of the widgetView, and potentially the tableView overflowing to the bottom.

推荐答案

这里是可能的布局解决方案.经过Xcode 12测试.

Here is possible layout solution. Tested with 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)
}

这篇关于SwiftUI WidgetKit:如何将视图锚定到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！