SwiftUI—Text视图的填充属性

简介: SwiftUI—Text视图的填充属性

内部填充属性,修改文字内容和文本视图边框之间的距离,即修改文本视图的上下左右的内边距。


复用padding特性,制作轮廓效果~

示例代码:


VStack{
    Text("www.hdjc8.com")
    .background(Color.black)
    .foregroundColor(.white)
    .padding(20) //设置填充属性的值为20,增加文本视图与文字内容的间距
    Text("www.hdjc8.com")
    .padding()
    .background(Color.black)
    .foregroundColor(.white) //链式调用的顺序由上而下,先设置内边距,再设置背景颜色和文字颜色,这时内边距也会拥有相应的背景颜色
    Text("Swift User Interface")
    .font(.largeTitle) //设置文字内容的样式为巨型标题样式,以突出显示文字内容
    .foregroundColor(.black)
    .padding(15)
    .background(Color.yellow)
    .padding(15) //在文本视图的外围再次增加15点的间距
    .background(Color.orange) //给新的内边距设置填充颜色为橙色
    .padding(10) //在文本视图的外围再次增加10点的间距
    .background(Color.red) //给新的内边距设置填充颜色为红色
}


2466108-0225434ec343ec94.webp.jpg


注:


链式编程的原理是调用一个属性或者方法的返回值是调用者本身。使得其可以继续调用本身中的方法或者属性。

目录
相关文章
SwiftUI—使用Text视图创建漂亮的富文本
SwiftUI—使用Text视图创建漂亮的富文本
1210 0
SwiftUI—使用Text视图创建漂亮的富文本
|
2月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
66 1
|
6月前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
161 2
|
JavaScript 前端开发 Java
18jqGrid - 表格数据SET类方法
18jqGrid - 表格数据SET类方法
49 0
|
Web App开发 前端开发 开发者
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
同时改变两个表格的宽 element ui
需求是两个表格,改变其中一个表格列的宽,另一个表格也随之相应改变同等宽度。
233 0
SwiftUI—Text视图的段落属性
SwiftUI—Text视图的段落属性
412 0
SwiftUI—Text视图的段落属性
SwiftUI—使用Text视图显示指定的文字
SwiftUI—使用Text视图显示指定的文字
439 0
SwiftUI—使用Text视图显示指定的文字
|
JavaScript 前端开发
jquery设置cursor的属性改变光标的类型(形状)
jquery设置cursor的属性改变光标的类型(形状)
|
JavaScript 前端开发 数据格式
ExtJS 6 gridPanel绘制表格并填充数据的例子
Ext.grid.Panel 是表格,可以显示数据,我们来看看它的基本用法:View + Store + Model使用上述三个“部分”就可以完整的,最简易的在Ext的世界中绘制一个用于显示数据库中数据的UI View部分的代码 Ext.
3068 0