在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ 本文演示文本视图的段落属性, 通过这些段落属性可以调整文字的字距、行距、偏移值、框架和对齐方式等视觉样式。 1 import SwiftUI 2 3 struct ContentView: View 4 { 5 var body: some View 6 { 7 VStack{ 8 //添加一个文本视图 9 Text("Interactive tutorials.") 10 11 //添加一个文本视图 12 Text("www.zengqiang.org") 13 //字距属性:表示一组文字的平均字距 14 .tracking(10) 15 16 //添加一个文本视图 17 Text("www.zengqiang.org") 18 //字距调整属性:表示一对字元的字距 19 .kerning(10) 20 21 //添加一个文本视图 22 Text("www.zengqiang.org") 23 //添加模糊效果,并设置模糊半径为1 24 .blur(radius: 1) 25 26 //添加一个文本视图 27 Text("SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift.") 28 //设置文本视图的行距为20 29 .lineSpacing(20) 30 //不限制文字的行数 31 .lineLimit(nil) 32 33 //添加一个文本视图 34 Text("www.zengqiang.org") 35 //设置文字内容在水平方向偏移40点的距离,垂直方向上偏移0距离 36 .offset(x: 40, y: 0) 37 38 //添加一个文本视图 39 Text("www.zengqiang.org") 40 //设置文本视图的宽度为200,高度为80,文字内容位于文本视图的中心位置 41 .frame(width: 200, height: 80, alignment: .center) 42 //背景颜色 43 .background(Color.orange) 44 45 //添加一个垂直排列视图,以方便添加更多的文本视图 46 VStack{ 47 //添加一个文本视图 48 Text("www.zengqiang.org") 49 //调用文本视图的位置方法,该方法会使对齐属性失效, 50 //因此文字不再位于文本视图右下脚, 51 //而是从文本视图的左上角,向右和向下各偏移50点的距离。 52 .position(x: 50, y: 50) 53 //设置文本视图的宽度为300,高度为100,文字内容位于文本视图的右下角 54 .frame(width: 300, height: 100, alignment: .bottomTrailing) 55 //背景颜色 56 .background(Color.orange) 57 58 //添加一个文本视图 59 Text("Interactive\ntutorials\nfor\nXcode!") 60 //设置可以显示4行文字 61 .lineLimit(4) 62 //设置文本视图的宽度为200,高度为100,文字内容默认左对齐 63 .frame(width: 200, height: 100) 64 //调用多行文字对齐的方法,将多行文字内容的对齐方式修改为居中对齐 65 .multilineTextAlignment(.center) 66 } 67 } 68 } 69 } 70 71 struct ContentView_Previews: PreviewProvider 72 { 73 static var previews: some View 74 { 75 ContentView() 76 } 77 }
|
请发表评论