swiftui开发之padding默认值设置详解
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>正文</li><li>padding 的默认值</li><li>对某个方向设置 padding</li><li>同时对多个方向设置 padding</li><li>对上下左右4个方向的 padding 进行精确设置</li><li>总结</li></ul></div><p class="maodian"></p><h2>正文</h2><p>swiftui 中的 padding 用于设置视图的填充。</p>
<p>使用 padding() 可以指定 Text、Button 等视图填充的数值，或者是对一个或多个边设置填充。</p>
<p>下面让我们来看看 padding 有哪些使用方式。</p>
<p class="maodian"></p><h2>padding 的默认值</h2>
<p>使用 padding() 设置填充时，没有设置具体数值将会使用特定平台给定的默认值。而这个默认值并没有标准值，对于不同的设备，用户的设置等情况，padding 的默认值都会有所不同：</p>
<p>如果值为 nil，则将应用特定平台指定的或者由系统计算的值用于填充。</p>
<p>来看看具体示例：</p>
<div class="jb51code"><pre class="brush:cpp;">import SwiftUI
struct Test: View {
var body: some View {
VStack{
Text("没有默认值的padding")
.padding()
.background(Color.red)
Text("填充值为16的padding")
.padding(16)
.background(Color.blue)
}
}
}
struct Test_Previews: PreviewProvider {
static var previews: some View {
Test()
}
}
</pre></div>
<p>iphone14 pro 显示效果(下面示例默认使用 iphone14 pro 显示）：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/20220923092525017.jpg" /></p>
<p>上图的显示效果中，默认值和 16 的效果近似，但不代表默认值就是 16。</p>
<p class="maodian"></p><h2>对某个方向设置 padding</h2>
<p>padding 可以对上下左右 4 个方向单独设置填充。</p>
<ul><li>top：上</li><li>bottom：下</li><li>leading：左</li><li>trailing：右</li></ul>
<div class="jb51code"><pre class="brush:cpp;">import SwiftUI
struct Test: View {
var body: some View {
VStack{
Text("上padding")
.padding(.top, 20) // 文字顶部设置 20 像素的填充
.border(Color.gray)
Text("下padding")
.padding(.bottom, 20)
.border(Color.gray)
Text("左padding")
.padding(.leading, 20)
.border(Color.gray)
Text("右padding")
.padding(.trailing, 20)
.border(Color.gray)
// 统一设置 16 像素的填充
Text("填充值为16的padding")
.padding(16)
.border(Color.gray)
}
}
}
struct Test_Previews: PreviewProvider {
static var previews: some View {
Test()
}
}
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/20220923092525018.jpg" /></p>
<p>注意：如果在设置某个方向的 padding 时没有给定具体数值，将会使用系统默认值：padding(.top)。</p>
<p class="maodian"></p><h2>同时对多个方向设置 padding</h2>
<p>我们还可以同时对多个方向设置 pdding。</p>
<div class="jb51code"><pre class="brush:cpp;">import SwiftUI
struct Test: View {
var body: some View {
VStack{
Text("上下padding")
.padding([.top, .bottom], 20)
.border(Color.gray)
Text("上下左padding")
.padding([.top, .bottom, .leading], 20)
.border(Color.gray)
Text("左右padding")
.padding([.leading, .trailing], 20)
.border(Color.gray)
Text("左右下padding")
.padding([.bottom, .leading, .trailing], 20)
.border(Color.gray)
Text("水平padding")
.padding(.horizontal, 20)
.border(Color.gray)
Text("垂直padding")
.padding(.vertical, 20)
.border(Color.gray)
Text("填充值为16的padding")
.padding(16)
.border(Color.gray)
}
}
}
struct Test_Previews: PreviewProvider {
static var previews: some View {
Test()
}
}
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/20220923092525019.jpg" /></p>
<p class="maodian"></p><h2>对上下左右4个方向的 padding 进行精确设置</h2>
<div class="jb51code"><pre class="brush:cpp;">import SwiftUI
struct Test: View {
var body: some View {
VStack{
Text("精确控制4个方向的padding")
.padding(EdgeInsets(top: 10, leading: 20, bottom: 30, trailing: 40))
.border(Color.gray)
Text("填充值为16的padding")
.padding(16)
.border(Color.gray)
}
}
}
struct Test_Previews: PreviewProvider {
static var previews: some View {
Test()
}
}
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/20220923092525020.jpg" /></p>
<p class="maodian"></p><h2>总结</h2>
<p>我们学会了 padding 的各个方向的设置，给你的布局加点 padding，对用户体验会更加友好哦。</p>
<p>以上就是swiftui开发之padding默认值设置详解的详细内容，更多关于swiftui padding默认值设置的资料请关注琼殿技术社区其它相关文章！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>SwiftUI 引导页界面实现示例</li><li>SwiftUI 登录界面布局实现示例详解</li><li>SwiftUI List在MacOS中的性能优化示例</li><li>Compose声明式代码语法对比React Flutter SwiftUI</li><li>SwiftUI智能家居开关灯页面搭建示例</li><li>SwiftUI开发总结combine原理简单示例详解</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]