SwiftUI—使用Text视图显示指定的文字

简介: SwiftUI—使用Text视图显示指定的文字

Text类似于UIKit中的UILabel,用于显示一行或多行的文字内容。


VStack视图可以将其内部的多个视图,在垂直方向等距排列,VStack中最多可以放10个子视图。


示例代码:


VStack{
    //Basic style
    Text("www.hdjc8.com")
    .bold() //加粗
    Text("www.hdjc8.com")
    .italic() //斜体
    Text("www.hdjc8.com")
    .underline() //下划线
    Text("www.hdjc8.com")
    .underline(true, color: .orange) //下划线颜色
    Text("www.hdjc8.com")
    .strikethrough() //删除线
    Text("www.hdjc8.com")
    .strikethrough(true, color: .orange) //删除线颜色
    Text("www.hdjc8.com")
    .foregroundColor(Color.orange) //文字颜色
    Text("www.hdjc8.com")
    .baselineOffset(CGFloat(5.0)) //文字向上偏移5
    .background(Color.orange) //文字背景颜色
     Text("www.hdjc8.com")
     .background(Image("Picture"), alignment: .bottom) //文字背景图片,文字位于图片底部
    //Font
    VStack{
    Text("www.hdjc8.com")
        .font(.footnote) //设置文字的尺寸为注脚样式
    Text("www.hdjc8.com")
        .font(.system(size: 36)) //文字大小
    Text("www.hdjc8.com")
        .font(.system(.title, design: .monospaced)) //设置文字的字体为标题样式,改样式可以根据屏幕尺寸的大小,自动调整自身的尺寸
    Text("www.hdjc8.com")
        .font(.custom("BradleyHandITCTT-Bold", size: 36)) //自定义文字字体、大小
    Text("www.hdjc8.com")
        .fontWeight(Font.Weight.heavy) //粗体
    Text("www.hdjc8.com")
        .fontWeight(Font.Weight.ultraLight) //纤细文字
    }
}


2466108-973f8cd50bfa91a5.webp.jpg

目录
相关文章
SwiftUI—使用Text视图创建漂亮的富文本
SwiftUI—使用Text视图创建漂亮的富文本
1246 0
SwiftUI—使用Text视图创建漂亮的富文本
element ui table 表格高度自适应
设置element ui table 表格高度自适应
2238 0
|
2月前
五、ArkTS 常用组件-文本显示 (Text / Span)
本文档介绍了ArkTS中的文本显示组件(Text/Span),包括其基本概念、参数设置、常用属性(如字体大小、粗细、颜色、对齐方式)、最大行数及超长处理方法,以及子组件Span的使用方法。Text组件支持多种参数类型,包括字符串、资源引用等,并提供了丰富的属性设置选项以满足不同的文本显示需求。Span组件则主要用于在Text组件内部实现更精细的文本格式化,如设置不同的字体颜色、大小、装饰线等,同时支持点击事件的添加。
124 2
|
7月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
872 3
|
8月前
|
Android开发 开发者
Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。
【6月更文挑战第26天】Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。要更改主题,首先在该文件中创建新主题,如`MyAppTheme`,覆盖所需属性。然后,在`AndroidManifest.xml`中应用主题至应用或特定Activity。运行时切换主题可通过重新设置并重启Activity实现,或使用`setTheme`和`recreate()`方法。这允许开发者定制界面并与品牌指南匹配,或提供多主题选项。
131 6
|
8月前
|
Android开发 开发者
Android UI中的Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等。要更改主题
【6月更文挑战第25天】Android UI中的Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等。要更改主题,首先在`styles.xml`中定义新主题,如`MyAppTheme`,然后在`AndroidManifest.xml`中设置`android:theme`。可应用于全局或特定Activity。运行时切换主题需重置Activity,如通过`setTheme()`和`recreate()`方法。这允许开发者定制界面以匹配品牌或用户偏好。
81 2
|
JavaScript
element-ui表格数据样式及格式化案例
element-ui表格数据样式及格式化案例
413 0
|
9月前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
210 2
|
9月前
|
C++
[Qt5&控件] Label控件显示文本内容(字符串和整数)
[Qt5&控件] Label控件显示文本内容(字符串和整数)
177 0
[Qt5&控件] Label控件显示文本内容(字符串和整数)
element-ui表格数据样式及格式化
element-ui表格数据样式及格式化
140 2

热门文章

最新文章