Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >SwiftUI中的拥抱子视图

SwiftUI中的拥抱子视图
EN

Stack Overflow用户
提问于 2019-06-29 22:08:56
回答 2查看 4.4K关注 0票数 13

Dave在他的关于自定义视图的SwiftUI讨论中解释了一些WWDC19布局的机制,但是他忽略了一些部分,我很难获得适当大小的视图。

是否有一种方法可以让视图告诉它的容器,它没有提出任何空间要求,但是它将使用它所提供的所有空间?另一种说法是容器应该拥抱其子视图。

具体的例子,我想要类似于c:

如果有一些TextVStack中,如a),则VStack将采用它的宽度到最宽的子视图。

如果您像在b中一样添加一个Rectangle,它将尽可能地展开,直到VStack填充它的容器为止。

这表明Texts和Rectangles在布局上属于不同的类别,Text有固定的大小,而Rectangle是贪婪的。但是,如果我要制作自己的View**?**,如何与容器进行通信呢?

我真正想要达到的结果是( c)。当VStack确定它的大小时,它应该忽略矩形(或我的自定义视图),然后一旦它这样做了,它应该告诉矩形,或者我的自定义视图,它可以有多少空间。

考虑到SwiftUI似乎是自下而上的布局,也许这是不可能的,但似乎应该有some的方法来实现这一点。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-29 22:52:32

没有修饰符(AFAIK)来完成这一任务,所以我的方法如下。如果这是您要经常使用的东西,那么创建您自己的修饰符可能是值得的。

还请注意,这里我使用的是标准首选项,但锚首选项甚至更好。这是一个很难解释的话题。我写了一篇文章,你可以在这里查看:https://swiftui-lab.com/communicating-with-the-view-tree-part-1/

您可以使用下面的代码来完成您想要的任务。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import SwiftUI

struct MyRectPreference: PreferenceKey {
    typealias Value = [CGRect]

    static var defaultValue: [CGRect] = []

    static func reduce(value: inout [CGRect], nextValue: () -> [CGRect]) {
        value.append(contentsOf: nextValue())
    }
}

struct ContentView : View {
    @State private var widestText: CGFloat = 0

    var body: some View {
        VStack {
            Text("Hello").background(RectGetter())
            Text("Wonderful World!").background(RectGetter())
            Rectangle().fill(Color.blue).frame(width: widestText, height: 30)
            }.onPreferenceChange(MyRectPreference.self, perform: { prefs in
                for p in prefs {
                    self.widestText = max(self.widestText, p.size.width)
                }
            })
    }
}

struct RectGetter: View {

    var body: some View {
        GeometryReader { geometry in
            Rectangle()
                .fill(Color.clear)
                .preference(key: MyRectPreference.self, value: [geometry.frame(in: .global)])
        }
    }
}
票数 8
EN

Stack Overflow用户

发布于 2019-07-02 03:26:22

所以我找到了一种方法。首先,我试着用不同的配置在视图周围放置垫片,试图把它推到一起,但那是行不通的。然后,我意识到我也许可以使用.background修饰符,这确实奏效了。它似乎让拥有的视图首先计算它的大小,然后就把它作为它的框架,这正是我想要的。

这只是一个例子,一些黑客,以获得正确的高度,但这是一个小细节,在我的特殊用例是不需要的。如果你够聪明的话,可能也不在这里。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var body: some View {
    VStack(spacing: 10) {
        Text("Short").background(Color.green)
        Text("A longer text").background(Color.green)
        Text("Dummy").opacity(0)
    }
    .background(backgroundView)
    .background(Color.red)
    .padding()
    .background(Color.blue)
}

var backgroundView: some View {
    VStack(spacing: 10) {
        Spacer()
        Spacer()
        Rectangle().fill(Color.yellow)
    }
}

蓝色的视图和所有的颜色背景,当然只是为了让它更容易看到。此代码生成以下内容:

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56822791

复制
相关文章
ajax传参形式
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
suveng
2019/09/18
4.3K0
PHP 判断页面请求是否为ajax
  jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest
Alone88
2019/10/22
1.7K0
如何将多个参数传递给 React 中的 onChange?
在 React 中,一些 HTML 元素,比如 input 和 textarea,具有 onChange 事件。onChange 事件是一个非常有用、非常常见的事件,用于捕获输入框中的文本变化。有时候,我们需要将多个参数同时传递给 onChange 事件处理函数,在本文中,我们将介绍如何实现这一目标。
网络技术联盟站
2023/06/07
2.7K0
静态页面ajax
1.静态页面 $.ajax({ type:"get", url:"http://localhost:8080/app/register
用户5899361
2020/12/07
2.9K0
Vue 中,如何将函数作为 props 传递给组件
作者:Michael Thiessen 译者:前端小智 来源:medium 点赞再看,养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录,更多往
前端小智@大迁世界
2020/05/18
8.2K0
不同页面传值
小程序页面传值,点击不同的页面反馈不一样对应页面 url传参 A页面:需要添加一些需传的值, <swiper indicator-dots='true' autoplay='true' interval='5000' duration='1000'   catchtap='onSwiperTap'> <swiper-item ><image src='/image/new-pic1.jpg' data-newsid='0' ></image></swiper-item> <swiper-item><imag
十月梦想
2018/08/29
1.8K0
iOS 页面传值
新的方式,在storybord的A和B两个ViewController拖出一条segue,假如从A跳到B
码客说
2019/10/22
1.4K0
php与Ajax(一)———Ajax简介
AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。
致Great
2023/08/26
1380
Ajax请求($.ajax())中data属性传参数的形式
实现Ajax提交数据进行请求,其中data属性设置传参的方法有好几种形式,如下: //第一种写法(把参数拼接在URL中,data属性设为空{ })
PM吃瓜
2019/08/12
3.9K0
PHP函数传值与传引用
1. 函数参数为对象时,传递的是对象地址,并非对象的拷贝 class Person{ public function __construct($name){ $this->name = $name; } } $aman = new Person('man'); function change( $p){ $p->name = 'lucy'; } change($aman); echo $aman->name; //lucy 2. 函数参数为对象以外的普通类型时,包括数
botkenni
2022/01/10
3.7K0
js实现页面跳转并传值(jquery页面跳转并传值)
在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,我常用下面两种方法
全栈程序员站长
2022/07/26
11.2K0
java 静态页面 ajax交互
java代码 public String getAllForum(){ List<AppForumEntity> forumEntity=forumService.getAllAp
用户5899361
2020/12/07
1.3K0
ajax php投票记录功能,PHP 实例 AJAX 投票 | 菜鸟教程[通俗易懂]
在下面的实例中,我们将演示一个投票程序,通过它,投票结果在网页不进行刷新的情况下被显示。
全栈程序员站长
2022/07/28
7.3K0
php与Ajax实例
Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
Java架构师必看
2021/03/22
2.9K0
Flutter(五)--Navigator&页面传值Flutter(五)--Navigator&页面传值
和iOS的NavigationController原理相同,都是使用堆栈的原理来管理页面。 在组件里可以使用Navigator.of(content)来获得父组件里的导航器 有两种方式来实现路由跳转 1,构建路由跳转 该builder方法中可以携带参数 push、pop都可以携带对象(参数、方法统称为对象),而pop所携带的参数类型是Future push模式 Widget build(BuildContext context) { return Container(
用户8893176
2021/08/09
2.3K0
PHP+Ajax+Canvas
ip地址: 计算机在网络中的唯一标识, 就是用来定位计算机的 缺点: 不好记
用户3461357
2019/08/02
3.3K0
shell脚本中如何将变量值做大小写转换
当我们需要将一些 Bash 变量值转换为例如大写时,我们经常使用一些管道,如下所示:
IT运维技术圈
2022/06/27
1.2K0
ajax前端传多维数组到php后台,关联数组转json到后台方法
这是一个技术性的问题,百度说的JSON.stringify(arr)是不能转换关联数组的,甚至索引数组也是有很多缺点
仙士可
2019/12/19
3.1K0
ajax前端传多维数组到php后台,关联数组转json到后台方法
vue父页面给iframe子页面传值
在vue父页面有两个个参数 名称和图标,需要把这两个参数传到iframe的地图里面,在地图触发绘点事件的时候,获取到传来的参数并且展示
王小婷
2023/08/11
1.5K0
vue父页面给iframe子页面传值
点击加载更多

相似问题

如何将变量值传递给php页面?

50

无法从php将变量值传递给ajax

10

ajax增强php页面中的变量值

27

如何使用ajax将变量值传递给php脚本?

214

如何将php变量值传递给javascript

24
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文