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视图创建漂亮的富文本
1246 0
SwiftUI—使用Text视图创建漂亮的富文本
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
310 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
5月前
<select>标记和<option>标签的常用属性
<select>标记和<option>标签的常用属性
234 2
|
9月前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
210 2
Element-ui 表格 (Table) 组件中动态合并单元格
Element-ui 表格 (Table) 组件中动态合并单元格
1102 0
Element-ui 表格 (Table) 组件中动态合并单元格
|
9月前
|
前端开发 小程序
使用element UI-table表格列宽自适应 【已解决】
使用element UI-table表格列宽自适应 【已解决】
529 0
SwiftUI—Text视图的段落属性
SwiftUI—Text视图的段落属性
435 0
SwiftUI—Text视图的段落属性
SwiftUI—使用Text视图显示指定的文字
SwiftUI—使用Text视图显示指定的文字
457 0
SwiftUI—使用Text视图显示指定的文字
SwiftUI—如何对Text视图里的日期进行格式化
SwiftUI—如何对Text视图里的日期进行格式化
714 0
SwiftUI—如何对Text视图里的日期进行格式化
SwiftUI—如何通过AnyView返回任意类型的视图
SwiftUI—如何通过AnyView返回任意类型的视图
284 0
SwiftUI—如何通过AnyView返回任意类型的视图

热门文章

最新文章