如何获取LazyVGrid中GridItem视图尺寸？或实现跨设备按钮角标显示

你当前用固定offset(x: -20, y: -20)定位数字，这种绝对像素偏移会因不同设备的按钮尺寸变化（比如iPad和iPhone的屏幕宽度差异导致GridItem大小不同）而失效。不需要单独获取GridItem的尺寸，用以下两种方法就能实现跨设备的左上角数字定位：

方法一：利用对齐方式+内边距（推荐） #

直接通过overlay的alignment参数将文本对齐到按钮的左上角，再用padding控制文本与边角的距离，这种方式完全适配按钮的尺寸变化：

import SwiftUI

struct ContentView: View {
    private let cols = Array(repeating: GridItem(.flexible()), count: 7)
    
    var body: some View {
        LazyVGrid(columns: cols) {
            ForEach(0...30, id: \.self) { item in
                Button {
                    // 点击逻辑
                } label: {
                    Image(systemName: "\(item).circle.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .foregroundColor(.orange)
                }
                .overlay(alignment: .topLeading) {
                    Text("\(item)")
                        .font(.caption)
                        .foregroundStyle(.blue)
                        .padding(4) // 调整该值控制文本与左上角的距离
                }
            }
        }
    }
}

方法二：用GeometryReader获取按钮尺寸（按需使用） #

如果需要更精细的比例控制，可以用GeometryReader获取按钮的实际尺寸，通过比例值定位文本，同样能适配所有设备：

import SwiftUI

struct ContentView: View {
    private let cols = Array(repeating: GridItem(.flexible()), count: 7)
    
    var body: some View {
        LazyVGrid(columns: cols) {
            ForEach(0...30, id: \.self) { item in
                Button {
                    // 点击逻辑
                } label: {
                    Image(systemName: "\(item).circle.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .foregroundColor(.orange)
                }
                .overlay {
                    GeometryReader { geo in
                        Text("\(item)")
                            .font(.caption)
                            .foregroundStyle(.blue)
                            .position(
                                x: geo.size.width * 0.15, 
                                y: geo.size.height * 0.15
                            ) // 用百分比定位，0.15代表从左上角往内15%的位置
                    }
                }
            }
        }
    }
}

核心原理 #

原来的固定偏移是基于绝对像素，而alignment或比例定位是基于按钮的相对尺寸，不管GridItem因屏幕宽度变化而调整按钮大小，文本都会保持在左上角附近的相对位置。

内容的提问来源于stack exchange，提问作者El Tomato