使用 SwiftUI 的relativeWidth 仅适用于框架视图

2024-01-07

尝试在 SwiftUI 中构建一个条形图元素,其宽度根据元素的值与其父视图成比例。这是问题的简化版本:

struct BarView : View {
var body: some View {
    Color.purple
        .relativeWidth(0.5)
    }
}

...产生:

我期望relativeWidth修饰符使用它的父级,它应该是屏幕的宽度,所以颜色视图应该是屏幕宽度的一半并且居中。如果视图嵌入到框架视图中,它将按预期工作:

struct BarView : View {
    var body: some View {
        Color.purple
            .relativeWidth(0.5)
            .frame(width: 200, height: 200)
    }
}

我需要视图在其容器内灵活,而不指定框架。我意识到有 GeometryReader,但是当relativeWidth 似乎正是这里所需要的时,这似乎有点麻烦。有任何想法吗?


Well, .relativeWidth()beta4 已经消失了...所以我正在更新我的答案。

作为替代方案几何阅读器 https://swiftui-lab.com/geometryreader-to-the-rescue/,这有其自身的不便,在您的情况下,使用 Shape 可能是一个不错的选择。

The path()您定义形状的函数有一个 rect 参数,可以帮助您进行绘图。这是一个解决方案:

import SwiftUI

struct BarShape: Shape {
    let percent: CGFloat

    func path(in rect: CGRect) -> Path {

        let fillPart = CGRect(x: 0, y: 0, width: rect.size.width * percent, height: rect.size.height)

        var p = Path()

        p.addRoundedRect(in: fillPart, cornerSize: CGSize(width: 8, height: 8))

        return p
    }
}

struct ContentView: View {
    var body: some View {
        BarShape(percent: 0.7).fill(Color.purple)
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 SwiftUI 的relativeWidth 仅适用于框架视图 的相关文章

随机推荐

  • 按HOME后重新启动应用程序时如何返回到最新启动的活动? [复制]

    这个问题在这里已经有答案了 熟悉的场景 我有一个Main启动的活动Game按下按钮时的活动 如果用户按 HOME 然后再次启动我的应用程序 则应显示GameActivity 这是他最后一次使用该应用程序时所做的事情 然而 相反发生的事情是他
  • 为什么 div 会有这样的行为?

    有时我的 div 会出现这个问题 无法按预期运行 我想要的是让它们按照我的理解 流动 布局 但它们不是 我只是想知道为什么不 我已经使用 firebug 来检查 css 似乎没有任何不符合规范的内容 但它们并没有一个接一个地流动 我提供了两
  • 在领域驱动设计中,您可以在 UI 中使用领域实体吗?

    在许多领先的 DDD 项目中 尤其是 MVC 风格 我看到 UI 使用镜像域实体的显示对象 而不是直接使用这些域对象 这种风格显然是为了解耦和分离关注点 我个人更喜欢这种风格 但我不确定这是否是 DDD 的严格原则 或者这是否只是不同开发人
  • 我需要做直方图拉伸

    我有一个 BitmapFrames 数组 需要进行直方图拉伸 我知道这与直方图均衡不同 最终结果是什么 有点 问题是我完全不知道得到直方图后该怎么做 到目前为止 我的代码为直方图创建了一个数组 因此我知道每个值有多少个像素 但在那之后我不知
  • 让semantic_errors呈现准确的错误消息

    我有一个模型Camping which has many Images 露营至少需要一张图片 class Camping lt ActiveRecord Base attr accessible images attributes has
  • PostgreSQL:如何实现最小基数?

    正如这个问题中的回答 PostgreSQL 中的基数 https stackoverflow com questions 3135206 cardinality in postgresql 基数是使用强制执行的限制条件 http www p
  • 使用游标获取字段值

    我正在创建一个应用程序 但遇到问题Cursor 我有一个SQLiteDatabase这给我返回了一个Cursor当我尝试使用此函数获取值时 public Cursor fetchOption long rowId throws SQLExc
  • 如何将“zd”说明符与“printf()”一起使用?

    寻求有关使用的说明 zd with printf 当然 对于 C99 及更高版本 以下内容是正确的 void print size size t sz printf zu n sz C 规范seems允许printf zd n sz 取决于
  • 如何正确对齐此文本?

    我今天写了这个极地时钟 我几乎完成了 除了我想在行内对齐我的文本 类似于this http blog pixelbreaker com polarclock 有谁知道如何做到这一点 我尝试使用 FontRenderContext 和字体指标
  • Android HttpClient 性能

    我正在开发 Android 应用程序 它使用大量对 Web 服务的 http 请求 起初 我在每个请求之前创建一个新的 HttpClient 实例 为了提高性能 我尝试在多个线程中执行请求 因此 我使用 ThreadSafeConnecti
  • 带有 c:foreach jstl 标签的二维数组列表

    我在两个叠瓦式 JSTL 中使用二维数组列表
  • 计算多个 CSV 文件中一列的平均值

    我的文件夹中有 300 多个 CSV 文件 名为 001 csv 002 csv 等 每个包含一个带有标题的数据帧 我正在编写一个函数 该函数将采用三个参数 文件的位置 要计算平均值的列的名称 数据框内 以及计算中使用的文件 这是我的功能
  • 如何在 Eclipse 中调试在 jetty 上运行的 Web 应用程序?

    以前从未做过网络编程 有没有办法设置断点 在 Eclipse 中查看变量值 我想要调试的应用程序会生成一个我想轻松提取的查询字符串 单击外部工具配置 Select program and click the new button top l
  • 无法将 React.lazy 与 Material UI 图标一起使用

    因为我的应用程序中的很多地方都有很多图标 所以我想对它们使用代码分割 我创建了辅助组件来执行此操作 import React FunctionComponent Suspense from react interface LazyMuiIc
  • 在哪里可以找到 Google Compute Engine 的名称服务器?

    我已将一个网站上传到我的 Compute Engine 实例 并且我想设置注册器以将访问者发送到服务器 Compute Engine 在哪里可以通过 Compute Engine 获取实例 服务器的名称服务器 Google Compute
  • 使用 alex/happy 与 Cabal

    我正在为我正在学习的课程编写一个编译器 该类不是专门的 Haskell 但我使用 Haskell 来编写我的编译器和解释器 我有一个 cabal 包设置 希望能让我的教授轻松运行 编译 我有快乐和亚历克斯在build tools两个可执行文
  • node.js - 配置节点将函数加载到全局范围内?

    在现实生活中 我在某个地方看到我们可以配置 Node js 在全局范围内执行加载的模块 但我现在找不到如何做到这一点 我为什么要问 我有一些遗留文件定义了我想在服务器和客户端上使用的语言实用程序 但是其中许多实用程序被定义为全局范围函数 例
  • 设计确认在首次发送时无效

    我有一个 Rails 4 应用程序 使用 Devise 3 2 2 confirmable 并且遇到了发送无效确认令牌的问题 但是只是第一次 重新发送确认令牌后 链接将起作用 相关路线 devise for users skip sessi
  • 设置信用卡号格式

    如何在输入时格式化和验证信用卡号 每 4 位数字之间留有空格 eg 4464 6846 4354 3564 我努力了 creditno keyup function cc this val split join cc cc match ne
  • 使用 SwiftUI 的relativeWidth 仅适用于框架视图

    尝试在 SwiftUI 中构建一个条形图元素 其宽度根据元素的值与其父视图成比例 这是问题的简化版本 struct BarView View var body some View Color purple relativeWidth 0 5