梅克尔工作室-任采薇-鸿蒙笔记2

组件介绍

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

  Image：图片组件，支持本地图片和网络图片的渲染展示。

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

  Button：按钮组件，可快速创建不同样式的按钮。

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

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

• 基础组件：
   

• image
  介绍：用来渲染展示图片，它可以让界面变得更加丰富多彩。设置图片地址、宽和高。
  使用方法
  1：
  Image($r("app.media.icon"))
    .width(100)
    .height(100)直接从resource->base->media中加载并设定宽和高             2：Image("/common/images/logo.jpg")，从自建立的一个文件夹中导入

• 设置缩放类型：
  介绍：可以使用objectFit属性设置图片的缩放类型，objectFit的参数类型为ImageFit。
  ImageFit包含以下几种类型：
  Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
  Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
  Auto：自适应显示。
  Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。
  ScaleDown：保持宽高比显示，图片缩小或者保持不变。
  None：保持原有尺寸显示。
  示例
  将图片加载到Image组件，设置宽高各100，设置objectFit为Cover（默认值），设置图片背景色为灰色0xCCCCCC。示例代码如下：

  Image($r("app.media.image2"))
    .objectFit(ImageFit.Cover)
    .backgroundColor(0xCCCCCC)
    .width(100)
    .height(100)
  可以将Cover换成上面的各种样式
  加载网络图片：
  Image组件支持加载网络图片，将图片地址换成网络图片地址进行加载。
  比如浏览新闻的时候，图片一般从网络加载而来，Image组件支持加载网络图片，将图片地址换成网络图片地址进行加载。

  Image('https://www.example.com/xxx.png')
  使用说明：为了成功加载网络图片，您需要在module.json5文件中申明网络访问权限。

• Text
  介绍：用于在界面上展示一段文本信息，可以包含子组件Span。
  文本样式：
  使用方法：针对包含文本元素的组件
  fontColor （ResourceColor） 设置文本的颜色
  fontSize（Length | Resource） 设置文本的大小
  fontStyle（FontStyle） 设置文本的样式
  fontWeight（number | FontWeight | string） 设置文本的粗细
  fontFamily（string | Resource） 设置文本的字体
  实例
   
          Text('HarmonyOS')
            .fontColor(Color.Blue)
            .fontSize(20)
            .fontStyle(FontStyle.Italic)
            .fontWeight(FontWeight.Bold)
            .fontFamily('Arial')
  设置文本对齐方式：
  介绍：textAlign属性可以设置文本的对齐方式
  使用方法：
  Start（默认值）：水平对齐首部。
  Center：水平居中对齐。
  End：水平对齐尾部。
  代码：
  Text('HarmonyOS')
    .width(200)
    .textAlign(TextAlign.Start)
  //Start（默认值）：水平对齐首部。
    .backgroundColor(0xE6F2FD)
  设置文本超长显示：
  介绍：当文本内容较多超出了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) 

• 设置文本装饰线：
  介绍：使用decoration设置文本装饰线样式及其颜色，decoration包含type和color两个参数，其中type用于设置装饰线样式，参数类型为TextDecorationTyp，color为可选参数。
  TextDecorationTyp包含以下几种类型：
  None：不使用文本装饰线。
  Overline：文字上划线修饰。
  LineThrough：穿过文本的修饰线。
  Underline：文字下划线修饰。
  示例
  Text('HarmonyOS')
    .fontSize(20)
    .decoration({ type: TextDecorationType.Underline, color: Color.Black })
    .backgroundColor(0xE6F2FD)
  Textinput
  介绍：用于输入单行文本，响应输入事件。
  设置输入提示文本：
  使用placeholder属性可以实现。可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式。
  代码：
  TextInput({ placeholder: '请输入帐号' })
    .placeholderColor(0x999999)
    .placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })
  设置输入类型：
  使用type属性来设置输入框类型。
  分类：
  Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
  Password：密码输入模式。
  Email：e-mail地址输入模式。
  Number：纯数字输入模式。
  代码：
  TextInput({ placeholder: '请输入密码' })
    .type(InputType.Password)
  设置改变位置：
  使用TextInputController动态设置光位置。
  支持文本样式设置
  获取输入文本：我们可以给TextInput设置onChange事件，输入文本发生变化时触发回调，下面示例代码中的value为实时获取用户输入的文本信息。
  示例
  @Entry
  @Component
  struct TextInputDemo {
  //设置空字符串用以存储后续输入内容
    @State text: string = ''
   
    build() {
      Column() {
        TextInput({ placeholder: '请输入账号' })
          .caretColor(Color.Blue)
          .onChange((value: string) => {
            this.text = value
          })
  //展示输入内容
        Text(this.text)
      }
      .alignItems(HorizontalAlign.Center)
      .padding(12)
      .backgroundColor(0xE6F2FD)
    }
  }

  Button
  介绍：主要用来响应点击操作，可以包含子组件。
  设置按钮样式：
  介绍：type用于定义按钮样式。
  分类：
  Capsule：胶囊型按钮（圆角默认为高度的一半）
  Circle：圆形按钮。
  Normal：普通按钮（默认不带圆角）。
  设置按钮点击事件：
  给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。
  可以包含子组件：
  Button组件可以包含子组件，可以开发出更丰富多样的Button。
  示例
  Button({ type: ButtonType.Circle, stateEffect: true }) {
    Image($r('app.media.icon_delete'))
      .width(30)
      .height(30)
  }
  .width(55)
  .height(55)
  .backgroundColor(0x317aff)