期末考试复习总结-《从简单的页面开始（下）》

一、知识点总结

1. 图片组件（Image）

• 加载方式：

  • 本地图片：通过$r('app.media.图片名')引用资源目录文件（如$r('app.media.icon')）。
  • 网络图片：直接使用URL（如'https://example.com/img.jpg'），需通过.onError()处理加载失败。

• 属性配置：

  • 尺寸：.width(200).height(200)或.size({ width: 200, height: 200 })。
  • 缩放模式：ImageFit.Contain（等比例显示）、ImageFit.Cover（裁剪填充）。
  • 圆角：.borderRadius(10)，圆形图片需半径等于宽度/2。
    
    

• 状态处理：

  • 加载中：.loadingProgress()显示进度条；加载失败：.onError(() => 显示默认图)。

2. 文本输入组件（TextField）

• 双向绑定：
  • 使用@State变量结合.onChange()事件（如@State text: string = '' + .value(this.text).onChange(v => this.text = v)）。
• 属性配置：
  • 输入类型：.type(InputType.Password)（密码）、.type(InputType.Number)（数字）。

输入类型	描述	应用场景	示例代码
InputType.Text	普通文本输入，支持所有字符。	适用于普通文本输入，如姓名、地址等。	.type(InputType.Text)
InputType.Password	密码输入，通常以隐藏形式显示（如显示为 * 或 •）。	适用于输入密码，保护用户隐私。	.type(InputType.Password)
InputType.Number	数字输入，仅支持数字字符。	适用于输入数字，如年龄、电话号码等。	.type(InputType.Number)
InputType.Email	电子邮件地址输入，支持电子邮件格式的验证。	适用于输入电子邮件地址。	.type(InputType.Email)
InputType.Tel	电话号码输入，支持电话号码格式的验证。	适用于输入电话号码。	.type(InputType.Tel)
InputType.Url	网址输入，支持网址格式的验证。	适用于输入网址。	.type(InputType.Url)
InputType.Date	日期输入，通常提供日期选择器。	适用于输入日期。	.type(InputType.Date)
InputType.Time	时间输入，通常提供时间选择器。	适用于输入时间。	.type(InputType.Time)
InputType.DateTime	日期和时间输入，通常提供日期和时间选择器。	适用于输入日期和时间。	.type(InputType.DateTime)
InputType.Search	搜索输入，通常提供搜索建议和清除按钮。	适用于搜索框。	.type(InputType.Search)

• 提示文本：placeholder: '输入提示'，.placeholderColor('#999')设置颜色。
• 事件处理：
  • 输入变化：.onChange()；完成输入：.onSubmit()（键盘“完成”触发）。

3. 文本输出组件（Text）

• 基础显示：
  • 字符串插值：Text(当前输入：${this.text})；富文本：.append()拼接不同样式文本。
• 样式配置：
  • 字体：.fontSize(16).fontWeight(FontWeight.Bold)；对齐：.textAlign(TextAlign.Center)。
• 长文本处理：
  • 自动换行：.wrap({ mode: TextWrap.Wrap })；省略显示：.maxLines(1).ellipsis(true)。

4. 按钮组件（Button）

• 基础用法：
  • 创建：Button('点击我')或.text('文本')；尺寸：.width(120).height(40)。
• 属性配置：
  • 背景：.backgroundColor('#007DFF')或.backgroundImage($r('...'))；边框：.border({ width: 2, color: '#FF5500' })。
• 事件与状态：
  • 点击：.onClick()；长按：.onLongPress()；禁用：.enabled(false)。

二、思维导图

三、模拟考试题（全知识点覆盖）

1. 单选题（10题×3分）

1. 加载本地图片的正确方式是（ ）
   A. Image('icon.png')
   B. Image($r('app.media.icon'))
   C. Image('./icon.png')
   D. Image('file://icon.png')
   答案：B

2. 文本输入框实现双向绑定需使用（ ）
   A. @Prop
   B. @State
   C. @Link
   D. @Observed
   答案：B

3. 按钮禁用状态的属性是（ ）
   A. disabled(true)
   B. enabled(false)
   C. clickable(false)
   D. active(false)
   答案：B

4. 图片等比例缩放并保持完整的模式是（ ）
   A. ImageFit.Stretch
   B. ImageFit.Cover
   C. ImageFit.Contain
   D. ImageFit.Fill
   答案：C

5. 文本输入框设置为密码类型的属性是（ ）
   A. .type(InputType.Password)
   B. .password(true)
   C. .secret(true)
   D. .inputMode('password')
   答案：A

6. 富文本拼接不同样式文字的方法是（ ）
   A. 字符串拼接
   B. .append()
   C. 多个Text组件
   D. 样式数组
   答案：B

7. 网络图片加载失败的回调是（ ）
   A. .onLoad()
   B. .onError()
   C. .onComplete()
   D. .onFailed()
   答案：B

8. 按钮按压反馈效果的属性是（ ）
   A. pressEffect(true)
   B. stateEffect(true)
   C. clickEffect(true)
   D. touchEffect(true)
   答案：B

9. 长文本超出1行显示省略号的配置是（ ）
   A. .maxLines(1).ellipsis(true)
   B. .lineClamp(1)
   C. .overflow(TextOverflow.Ellipsis)
   D. .wrap(TextWrap.NoWrap)
   答案：A

10. 按钮背景设置图片的属性是（ ）
    A. backgroundColor
    B. backgroundImage
    C. bgImage
    D. imageBackground
    答案：B

2. 判断题（10题×1分）

1. TextField双向绑定只需设置value属性。（ ）
   答案：×（需结合onChange）

2. ImageFit.Cover会裁剪图片填充容器。（ ）
   答案：√

3. 按钮禁用时会自动变灰。（ ）
   答案：√

4. 文本组件不支持富文本拼接。（ ）
   答案：×（.append()支持）

5. 网络图片无需处理加载失败。（ ）
   答案：×（需.onError()）

6. 密码输入框内容默认显示星号。（ ）
   答案：√

7. 按钮无法同时绑定点击和长按事件。（ ）
   答案：×

8. 图片圆角半径为宽度一半时显示圆形。（ ）
   答案：√

9. 文本输入框无法限制输入长度。（ ）
   答案：×（通过@State控制）

10. 富文本拼接必须使用相同样式。（ ）
    答案：×

3. 简答题（4题×5分）

1. 简述图片组件加载本地与网络图片的区别。
   参考答案：

   • 本地图片通过$r('app.media.名')加载，速度快，无需网络；
   • 网络图片用URL加载，需处理断网等异常（如.onError()显示默认图），加载速度受网络影响。

2. 如何实现TextField双向绑定？
   参考答案：

   1. 用@State声明变量（如@State input: string = ''）；
   2. 绑定到value属性并监听变化：.value(this.input).onChange(v => this.input = v)，实现输入与变量同步。

3. 说明Button禁用状态的实现方式。
   参考答案：

   • 通过.enabled(false)设置禁用状态，按钮会变灰且无法触发点击事件，常用于表单验证未通过时（如输入为空时禁用“提交”按钮）。

4. 长文本处理有哪些方式？
   参考答案：

   • 自动换行：.wrap({ mode: TextWrap.Wrap })；
   • 省略显示：.maxLines(n).ellipsis(true)（n为行数，超出显示省略号）；
   • 滚动显示：包裹在Scroll组件中。

4. 程序填空题（2题×10分）

题目1：补全图片加载代码（本地图片+圆形显示）。

Image(______)  // 加载本地图片"logo"  .width(100).height(100)  .______;  // 圆形设置  

答案：
第1空：$r('app.media.logo')
第2空：borderRadius(50)

题目2：补全文本输入与按钮联动代码（输入内容点击按钮显示）。

@State inputText: string = '';  
@State showText: string = '';  TextField({ placeholder: '输入内容' })  .value(this.inputText)  .onChange((v) => { this.inputText = ______; });  Button('提交')  .onClick(() => { this.showText = ______; });  Text(this.showText);  

答案：
第1空：v
第2空：this.inputText

5. 编程题（2题×10分）

题目1：实现图片加载页面（本地+网络，网络失败显示默认图）。

@Entry 
@Component  
struct ImageDemo {  @State networkUrl: string = 'https://invalid.url';  // 无效URL测试失败  @State defaultImg: string = $r('app.media.default');  build() {  Column {  Text('图片加载演示').fontSize(24);  // 本地图片  Row {  Text('本地图片：');  Image($r('app.media.icon'))  .width(80).height(80)  .imageFit(ImageFit.Contain);  }  // 网络图片  Row {  Text('网络图片：');  Image(this.networkUrl)  .width(80).height(80)  .imageFit(ImageFit.Contain)  .onError(() => {  // 加载失败切换默认图  this.networkUrl = this.defaultImg;  });  }  }  .padding(20);  }  
}  

题目2：实现文本输入与按钮交互（输入密码后点击按钮显示提示）。

@Entry 
@Component  
struct PasswordDemo {  @State password: string = '';  @State tip: string = '';  build() {  Column {  Text('密码输入演示').fontSize(24).marginBottom(20);  TextField({ placeholder: '输入密码' })  .type(InputType.Password)  // 密码类型  .value(this.password)  .onChange((v) => this.password = v)  .width('80%')  .height(50)  .border({ width: 1, color: '#DDD' })  .borderRadius(8);  Button('验证')  .width('50%')  .height(40)  .onClick(() => {  if (this.password === '123456') {  this.tip = '密码正确';  } else {  this.tip = '密码错误';  }  });  Text(this.tip)  .fontSize(18)  .marginTop(20)  .fontColor(this.tip.includes('正确') ? Color.Green : Color.Red);  }  .width('100%')  .height('100%')  .justifyContent(FlexAlign.Center);  }  
}