SwiftUI：在NavigationStack的TabView中使用Assets图片并适配尺寸

一、修复尺寸不生效的问题 #

TabItem的布局有自身约束规则，直接给Image添加resizable和frame往往无法生效，可通过以下两种方式解决：

方式1：用VStack包裹图片（适用于无文字的TabItem） #

将图片放在VStack内，明确设置缩放模式和尺寸：

ChatsView()
    .tabItem {
        VStack {
            Image("myImage")
                .resizable()
                .scaledToFit() // 保持图片比例
                .frame(width: 20, height: 20)
        }
    }
    .tag(1)

方式2：使用Label组件（更贴合系统TabItem布局逻辑） #

利用Label的自动适配特性，配合labelStyle控制仅显示图标：

ChatsView()
    .tabItem {
        Label("", image: "myImage")
            .labelStyle(.iconOnly)
            .imageScale(.medium) // 可选：用系统预设缩放等级，或自定义frame
    }
    .tag(1)

若需要更精准的尺寸控制，可在Label内部叠加自定义尺寸的图片：

ChatsView()
    .tabItem {
        Label("", image: "")
            .labelStyle(.iconOnly)
            .overlay(
                Image("myImage")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 20, height: 20)
            )
    }
    .tag(1)

二、解决图片像素化问题 #

像素化通常源于图片分辨率不足或未适配不同设备屏幕倍率：

• 添加多分辨率图片：在Assets中为myImage配置1x、2x、3x版本，基础尺寸（1x）建议设为20x20，对应2x为40x40、3x为60x60，确保不同设备加载匹配的高清图。
• 启用模板渲染模式：若需要图片颜色跟随TabItem的accentColor，同时优化渲染效果，可添加.renderingMode(.template)：

Image("myImage")
    .renderingMode(.template)
    .resizable()
    .scaledToFit()
    .frame(width: 20, height: 20)

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