梅科尔工作室-赵亮-鸿蒙笔记2

• 组件：
  • 介绍：界面搭建与显示的最小单位。
  • 分类：基础组件、容器组件、媒体组件、绘制组件、画布组件。
• 基础组件：
  • 介绍：视图层的基本组成单元
  • 包括：
    • 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)