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

Question

我正在尝试使用SwiftUI和WidgetKit布局tableView，并希望实现与苹果的Notes widget类似的结果。

我的当前实现成功地在.systemLarge小部件中布局视图，但是在.systemMedium小部件中没有成功。我想将视图固定在小部件的顶部，以便在.systemMedium小部件中可见“FAVOURITES”标题。

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溢出到底部。

- Koh

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)
}

- Asperi

Answer 2

从WidgetKit的试验中可以看出，如果小部件中有太多视图，它就会开始将上方的视图推出屏幕。如果您向数组添加更多位置，则会在大型小部件中看到同样的情况。您可以创建单独的视图：一个用于中等大小的小部件，另一个用于大型小部件，并且对于中等大小的小部件，只需使用1-3个位置对象来填充它。

您可以在PlacesEntryWidgetView中使用switch语句和widgetFamily来决定要在视图上显示什么。我还略微减少了图像的高度，从28降至24。

struct PlacesWidgetEntryView : View {
    var entry: Provider.Entry
    @Environment(\.widgetFamily) var family
    
    let places = [
            Place(name: "Place 1", imageName: "blackStar"),
            Place(name: "Place 2", imageName: "blackStar"),
            Place(name: "Place 3", imageName: "blackStar"),
            Place(name: "Place 4", imageName: "blackStar"),
            Place(name: "Place 5", imageName: "blackStar"),
            Place(name: "Place 6", imageName: "blackStar"),
            Place(name: "Place 7", imageName: "blackStar"),
            Place(name: "Place 8", imageName: "blackStar")
        ]

    @ViewBuilder
    var body: some View {
        switch family {
        case .systemMedium:
            // widget can only show so many views so I only took first 3 places
            WidgetView(places: Array(places.prefix(3)))
        case .systemLarge:
            WidgetView(places: places)
        // I only have it set to show system medium so you can ignore
        // the last case
        case .systemSmall:
            Text("")
        @unknown default:
            Text("")
        }
    }
}

struct WidgetView: View {
    let places: [Place]
    
    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: 24, alignment: .center)
        }
        .padding(.horizontal)
        .padding(.vertical, 4)
    }
}

这是预览：

请注意，您可能需要在模拟器之间切换，以确保您的小部件在所有设备上看起来都很好。

- droberson