一、背景

  我们在布局中,经常会遇到视图元素排列时空间不足或者空间过大的情况,在这种场景下面,不同的布局方式有不同的方法:

  绝对布局frame:纯靠计算过程控制,获取父视图的大小,根据需求,计算自己需要的大小,并设置到frame上去

  iOS autolayout:这里更先进一点,将视图中的约束预设进布局的DSL中,当视图的尺寸发生变化的时候,根据DSL描述修改视图的尺寸,这个是自动化完成的

  swiftui:目前来看可以使用frame的最大值最小值理想值完成约束预设,此外还可以通过view的modifier进行预设

二、例子

struct CharView: View {
var body: some View {
HStack {
}.frame(minWidth: 50, maxWidth: 100, minHeight: 50, maxHeight: 100)
.background(.green)
.border(.red)
.overlay {
GeometryReader { proxy in
Text("\(proxy.size.width) x \(proxy.size.height)")
}
}
}
} struct WordView: View {
var body: some View {
HStack(spacing: 0) {
CharView().layoutPriority(1.0)
CharView().layoutPriority(2.0)
}
.frame(width: 160, height: 100)
.fixedSize(horizontal: false, vertical: true)
.border(.yellow)
}
}

这边有两个view,分别设置的最大宽度100,最小宽度50; 同时父容器是160,那么两个容器放不下,这个时候,会优先布局优先级高的容器,所以右边的视图是100, 左边视图是60

这里的优先级和Flex中的 flex-basis不一样,不是按照比例分配的

SwiftUI Stack中的View被压缩的效果的更多相关文章

  1. 在android4.0中实现View的拖动效果

    实现方法: 首先需要定义一个支持拖动的源组件和一个作为Drop区域的目标组件. 在支持拖动的组件中注册OnTouchListener 或LongClickListener监听事件,构建一个ClipDa ...

  2. android中实现view可以滑动的六种方法续篇(二)

    承接上一篇,上一篇中讲解了实现滑动的第五种方法,如果你还没读过,可点击下面链接: http://www.cnblogs.com/fuly550871915/p/4985482.html 这篇文章现在来 ...

  3. android中实现view可以滑动的六种方法

    在android开发中,经常会遇到一个view需要它能够支持滑动的需求.今天就来总结实现其滑动的六种方法.其实每一种方法的 思路都是一样的,即:监听手势触摸的坐标来实现view坐标的变化,从而实现vi ...

  4. 如何在低api中使用View的属性设置方法如setAlpha等

    ViewPagerTransforms 是一个自定义了各种翻转效果的开源库,其中的各种PageTransformer使用了view的很多属性设置方法如DepthPageTransformer中:? p ...

  5. 详解ExplosionField的使用,实现View的粉碎效果

    小米平板卸载软件的时候,会有一个粉碎的效果,看起来很拉风,GitHub上有一个开源控件可以实现这个效果,我们一起来看看.先来看看效果图: 看起来不错吧,那我们今天就来详细说说ExplosionFiel ...

  6. 《Qt编程的艺术》——8.2.1 在Designer中使用View类

    不幸的是,QDirModel有一个严重的限制:因为view不响应鼠标操作,我们不得不自己建立这些功能.除此之外,每个view中,用户都一次只能选择一个元素.如果你想要允许同时选择多个项目,你也必须自己 ...

  7. android设置view透明度的效果

    android设置view透明度的效果 推荐textView.setBackgroundColor(Color.TRANSPARENT);     第一种方法:在xml文件中设置背景颜色. andro ...

  8. android开发:Android 中自定义View的应用

    大家好我们今天的教程是在Android 教程中自定义View 的学习,对于初学着来说,他们习惯了Android 传统的页面布局方式,如下代码: <?xml version="1.0&q ...

  9. 如何让IOS中的文本实现3D效果

    本转载至 http://bbs.aliyun.com/read/181991.html?spm=5176.7114037.1996646101.25.p0So7c&pos=9       zh ...

  10. 详解实现Android中实现View滑动的几种方式

    注: 本文提到的所有三种滑动方式的完整demo:ScrollDemo 1. 关于View我们需要知道的 (1)什么是View? Android中的View类是所有UI控件的基类(Base class) ...

随机推荐

  1. 重新点亮linux 命令树————screen 命令和系统日志[二十四]

    前言 简单介绍一下screen 正文 因为我们终端关闭后,终端就消失了,故而希望有终端保持. 1.yum install screen 进行安装. 2.使用screen 进行进入 3.然后打开tail ...

  2. clearValidate()和resetFields()表单校验的用法和区别

    目标:实现表单重置和清除验证 1.整个表单的校验移除 <Form ref="form" rule={this.rules}> <FormItem prop=&qu ...

  3. 第五課-Channel Study TCP Listener & Web Service Listener

    示例描述: 我们将研究如何获取相当常见的HL7 v2消息并将其映射到自定义Web Service接口服务.在许多实际情况下,当我们要连接到HIE,EMPI,数据仓库或数据存储库时,必须这样做.此用例说 ...

  4. 力扣50(java)-Pow(x,n)(中等)

    题目: 实现 pow(x, n) ,即计算 x 的整数 n 次幂函数(即xn ). 示例 1: 输入:x = 2.00000, n = 10输出:1024.00000示例 2: 输入:x = 2.10 ...

  5. 技术实践第三期|HashTag在Redis集群环境下的使用

    ​简介:欢迎了解友盟+技术干货第三期内容:Redis集群环境如何按照前缀批量删除缓存.希望能对开发者们在实际应用中有所帮助. 一.背景 数据源列表添加缓存支持,types字段可传多值,如app, mi ...

  6. 治理企业“数据悬河”,阿里云DataWorks全链路数据治理新品发布

    ​简介: 10月19日,在2021年云栖大会上,阿里云重磅发布DataWorks全链路数据治理产品体系,基于数据仓库,数据湖.湖仓一体等多种大数据架构,DataWorks帮助企业治理内部不断上涨的&q ...

  7. dotnet 使用 XWT 构建跨平台客户端 入门篇

    本文告诉大家如何入门开始开发一个基于 mono 组织开源的 XWT 跨平台客户端 UI 框架的应用,本文的 xwt 是在 GitHub 上完全开源的,基于 MIT 协议的,底层采用 GTK# 的 UI ...

  8. Multisim14.0安装步骤

    免责声明:以下图片资源来源于Internet,作搜集学习之用.   此处,若只用到multisim仿真,可以只选择multisim 14.0 下面的education edition.

  9. 如何通过前后端交互的方式制作Excel报表

    前言 Excel拥有在办公领域最广泛的受众群体,以其强大的数据处理和可视化功能,成了无可替代的工具.它不仅可以呈现数据清晰明了,还能进行数据分析.图表制作和数据透视等操作,为用户提供了全面的数据展示和 ...

  10. Python使用HTMLTestRunner运行所有用例并产生报告

    #coding:utf-8import unittestimport osimport sysimport HTMLTestRunnercase_path = os.path.join(os.path ...