svg - TabBar 中的 SwiftUI SVG

标签 svg swiftui

既然 SwiftUI 可以直接使用 SVG 图片,我尝试使用一组 SVG 文件作为 TabBar 的图标。使用典型的 TabBar 代码:

            TabView(selection: $lastTab){
                VendorView()
                    .tabItem {
                        Image ("store")
                            .renderingMode(.template)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 25.0, height: 25.0)
                        Text("Vendor")
                }
                .tag(0)
                ...

不幸的是,这似乎不起作用,因为 SVG 图像从未调整到请求的 25x25 大小。

enter image description here

有没有其他人遇到过这种情况,如果有,有什么解决方法吗?

最佳答案

处理 TabView 中 SVG 作为 Image() 问题的最佳方法是执行以下步骤:

  1. 在 Sketch/Figma 或其他程序中将您的 SVG 大小调整为 22x22/24x24...

  2. 将上述调整大小的 SVG 带到 Assets 中,并在您的 Inspector 中选择:

    1. 呈现为:模板图像

    2. 调整大小:保留矢量数据

    3. 尺度:单尺度

  3. 无需使用 .resizable().frame()

我从 Mark Moeykens 那里学到了新的技巧和原始答案 https://stackoverflow.com/a/37627080/15382735

关于svg - TabBar 中的 SwiftUI SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64470349/

相关文章:

html - 当容器 ul 可见时绘制 svg 线条

swift - 如何从 SwiftUI 中的列表中删除 "row"分隔符/分隔符?

ios - 如何在点击PresentationLink (SwiftUI) 时禁用闪烁?

css - 如何将 SVG 中的所有路径移动到同一点

javascript - 在 svg 中集中根节点

javascript - 当元素超出视口(viewport)时我应该删除它吗?

ios - 如何在 SwiftUI 中读取 Indexset 元素的值?

swiftui - 绑定(bind)到 SwiftData @Query 数组中第一个元素的属性

SwiftUI - 按钮 - 如何将函数(带参数)请求从子传递给父

command-line - 如何使用 Inkscape CLI 保存 SVG 文件?