2. SwiftUI学习之_padding1()

padding 也是填充的意思,但是他是以他所修饰的控件为主体的,可以理解成是围绕着这个控件的周围的距离,这个距离你可以进行设置值,下边来看一下有哪些参数可以设置

public static let top: Edge.Set 上
public static let leading: Edge.Set 头/左
public static let bottom: Edge.Set 下
public static let trailing: Edge.Set 尾/右
public static let all: Edge.Set 所有,四个方向
public static let horizontal: Edge.Set 水平方向 /头+尾/左+右
public static let vertical: Edge.Set 垂直方向/上+下

所有的方向都可以不设置值,只写上方向,它会自动分配一个默认的距离,这个距离是多少,暂时我还没有查资料。

下边设置几个典型的来简单的分析一下:

VStack {
Text("文本填充在底部边缘。")
.padding(.vertical)
.border(Color.gray)

Text("未填充的文本")
.border(Color.red)
}

可以看到这个上边是设置了 填充方向是竖直方向,那么会默认分配一个默认的距离,如图所示


企业微信截图_bf179d7d-fe77-4b70-8f41-ed0b2520d363.png
企业微信截图_bf179d7d-fe77-4b70-8f41-ed0b2520d363.png

如果我把.padding(.vertical) 改成.padding(.vertical, 30)呢?之后是咋样呢? 猜想是上下的距离更加的大了,变成了30 ,我们来看一下啊


企业微信截图_42ab36e6-d98d-45de-9633-e7e3351894eb.png
企业微信截图_42ab36e6-d98d-45de-9633-e7e3351894eb.png

对比这两个图,明显的看到了,距离更加的大了。

那么看一下这个padding可以怎样进行设置?
.padding() 里边啥也不写就是所有的方向都设置


截屏2021-07-31 下午4.17.08.png
截屏2021-07-31 下午4.17.08.png

我们可以看到这个padding有 4个方法,可以进行使用。
第1个,第3个就是对所有的方向进行设置的,第1个是没有参数的,第3个是有距离长度参数的。
第2个是传入的参数是EdgeInsets ,可以同时对四个方向进行设置,当然用不到的也可以设置成0
第4个是出传入的是个数组,也就是方向的集合

举个例子:

VStack {
Text("文本填充在底部边缘。")
.padding(EdgeInsets(top: 10, leading: 50, bottom: 0, trailing: 0)) //方法2

.padding([.leading,.trailing], 10) //方法4
.border(Color.gray)

Text("未填充的文本")
.border(Color.red)
}

最后得到的效果是叠加的,第一次 给上设置10 ,给左边设置50 ;第二次给左右各设置了10

那么最后的效果是:上10 左 60 右10 下0吗? 我们来看一下效果图:


企业微信截图_2074cce1-5a4a-43d1-87cf-ee49ffc3d723.png
企业微信截图_2074cce1-5a4a-43d1-87cf-ee49ffc3d723.png

果然和我们猜想的一样!

总结: .padding是在空间的四周进行设置的间距,如果不设定具体的值,哪会有一个默认的距离,如果设置了,则显示设置的值。同时可以根据自己的需要采取不同的方法,对多个方向设置有2方法,一个是使用集合,一个是利用EdgeInsets

问题1: 如何知道padding 是对谁设置的呢?
首先如果是对具体的控件设置的话,大家应该都知道,他们的层级是不一样的,比如下边这样

 Text("888")
     .padding(15)

那么肯定是对Text进行设置的。


企业微信截图_56ed3f95-76e5-4d33-b53c-325f81583588.png
企业微信截图_56ed3f95-76e5-4d33-b53c-325f81583588.png

通过上图可以看出,如果是堆栈控件的话,他的padding会跟堆栈是并列的。
第一个 设置了VStack的尾部padding为20
第二个 设置了 HStack的上下padding为50

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • 可以对比参照UIKit中的UILabel 下面通过代码来举例,一些常用的属性和方法,更多内容可以参考后边的详细说明...
    水之飞亦阅读 388评论 0 1
  • 1.项目所遇到的问题集合 [if !supportLists]1.[endif]设置div的背景阴影 用:box-...
    一笑奈何_3bea阅读 1,149评论 0 0
  • Padding可以给其子节点添加填充(留白),和边距效果类似。源码如下: EdgeInsets EdgeInset...
    zombie阅读 860评论 0 1
  • 参考书籍:《Android开发艺术探索》 任玉刚如有错漏,请批评指出! View的工作流程 前面说过,View的工...
    CCCode1997阅读 412评论 0 6
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,503评论 28 53