题目
下面哪个代码片段会在按钮获焦时改变背景色A. Button('Button2') .stateStyles(( pressed: { .backgroundColor('#ff707070') ) }) .margin('30%')B. Button('Button2') .stateStyles(( disabled: { .backgroundColor('#ff2787d9') ) }) .margin('30%')C. Button('Button2') .stateStyles(( focused: { .backgroundColor('#ffffeefe') ) }) .margin('30%')
下面哪个代码片段会在按钮获焦时改变背景色
A. Button('Button2') .stateStyles({ pressed: { .backgroundColor('#ff707070') } }) .margin('30%')
B. Button('Button2') .stateStyles({ disabled: { .backgroundColor('#ff2787d9') } }) .margin('30%')
C. Button('Button2') .stateStyles({ focused: { .backgroundColor('#ffffeefe') } }) .margin('30%')
题目解答
答案
C. Button('Button2') .stateStyles({ focused: { .backgroundColor('#ffffeefe') } }) .margin('30%')
解析
考查要点:本题主要考查对按钮状态样式的理解,特别是不同状态(pressed、disabled、focused)对应的触发条件,以及如何通过代码实现特定状态下的样式更改。
解题核心思路:
- 明确状态含义:  - pressed:按钮被按下时触发(如手指点击屏幕并保持按下的瞬间)。
- disabled:按钮被禁用时触发(如操作不可用时)。
- focused:按钮获得焦点时触发(如通过键盘 Tab 导航或点击按钮后)。
 
- 匹配需求:题目要求按钮获焦时改变背景色,因此需选择对应 focused状态的代码片段。
破题关键点:
- 区分状态名称:直接根据状态名称 focused对应“获焦”即可锁定正确选项。
选项分析
选项 A
Button('Button2') 
.stateStyles({ 
  pressed: { 
    .backgroundColor('#ff707070') 
  } 
}) 
.margin('30%')- 状态类型:pressed(按钮被按下时触发)。
- 效果:按钮按下时背景色变为 #ff707070。
- 结论:不符合“获焦”需求。
选项 B
Button('Button2') 
.stateStyles({ 
  disabled: { 
    .backgroundColor('#ff2787d9') 
  } 
}) 
.margin('30%')- 状态类型:disabled(按钮被禁用时触发)。
- 效果:按钮禁用时背景色变为 #ff2787d9。
- 结论:不符合“获焦”需求。
选项 C
Button('Button2') 
.stateStyles({ 
  focused: { 
    .backgroundColor('#ffffeefe') 
  } 
}) 
.margin('30%')- 状态类型:focused(按钮获得焦点时触发)。
- 效果:按钮获焦时背景色变为 #ffffeefe。
- 结论:符合题目要求。