> 文档中心 > 梅科尔工作室-寇涵冰-鸿蒙笔记2

梅科尔工作室-寇涵冰-鸿蒙笔记2

组件根据功能可以分为以下五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件

基础组件是视图层的基本组成单元,包括Text(文本)、Image(图像)、TextInput(输入文本)、Button(按钮)、LoadingProgress等

  • Text:显示一段文本的组件。

  • Image:图片组件,支持本地图片和网络图片的渲染展示。

  • TextInput:可以输入单行文本并支持响应输入事件的组件。

  • Button:按钮组件,可快速创建不同样式的按钮。

  • LoadingProgress:用于显示加载动效的组件。

  • Flex:应用弹性方式布局子组件的容器组件。

  • Column:沿垂直方向布局的容器。

  • Row:沿水平方向布局容器。

  • List:列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。

  • Swiper:滑动容器,提供切换子组件显示的能力。

  • Grid:网格容器,由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。

加载网络图片:比如浏览新闻的时候,图片一般从网络加载而来,Image组件支持加载网络图片,将图片地址换成网络图片地址进行加载。

Image('https://www.example.com/xxx.png')

为了成功加载网络图片,您需要在module.json5文件中申明网络访问权限。

文本样式:fontColor:文本的颜色、fontSize大小、fontStyle样式、 fontWeight粗细、fontFamily字体。例如:

Text('HarmonyOS') Text('HarmonyOS')   .fontColor(Color.Blue)   .fontSize(20)   .fontStyle(FontStyle.Italic)   .fontWeight(FontWeight.Bold)   .fontFamily('Arial')

文本对齐方式:textAlign属性可以设置文本的对齐方式

textAlign(TextAlign.Start)

文本装饰线:None:不使用文本装饰线 Overline:文字上划线修饰 LineThrough:穿过文本的修饰线 Underline:文字下划线修饰

设置文本超长显示:当文本内容较多超出了Text组件范围的时候,可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数

Text('This is the text content of Text Component This is the text content of Text Component')  .fontSize(16)  .maxLines(1)  .textOverflow({overflow:TextOverflow.Ellipsis})  .backgroundColor(0xE6F2FD) 

效果图如下: