135-1821-9792

Selector在HarmonyOS中的使用

想了解更多内容，请访问：

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的金凤网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

Selector其实就是一组状态列表(StateList)，可以将不同的状态关联不同的效果，主要用于设置控件背景和字体颜色等。控件一共有7种状态，常用的有：空状态empty，按下状态pressed，获取焦点focused，勾选状态checked，不可用状态disable。

鸿蒙中selector效果可以通过xml的state-container标签或者在代码中使用StateElement来实现，下面以button的背景选择器举例说明：

 
 
 
 
    
  
  
  
  
  1. // 表示当前控件处于被勾选状态（check状态），如控件Checkbox
    2. 
  
  
  
  
  2. public static final int COMPONENT_STATE_CHECKED = 64;
    3. 
  
  
  
  
  3. // 表示当前控件处于不可用状态，如Button的setEnabled为false
    4. 
  
  
  
  
  4. public static final int COMPONENT_STATE_DISABLED = 32;
    5. 
  
  
  
  
  5. // 初始状态
    6. 
  
  
  
  
  6. public static final int COMPONENT_STATE_EMPTY = 0;
    7. 
  
  
  
  
  7. // 表示当前控件处于获取焦点的状态，如TextField被点击输入文字时
    8. 
  
  
  
  
  8. public static final int COMPONENT_STATE_FOCUSED = 2;
    9. 
  
  
  
  
  9. // 表示光标移动到当前控件上的状态
    10. 
  
  
  
  
  10. public static final int COMPONENT_STATE_HOVERED = 268435456;
    11. 
  
  
  
  
  11. // 当用户点击或者触摸该控件的状态，如Button点击
    12. 
  
  
  
  
  12. public static final int COMPONENT_STATE_PRESSED = 16384;
    13. 
  
  
  
  
  13. // 表示控件被选择地状态，比如一个ListContainer获得焦点（focus），而用方向键选择了其中一个item（selecter）
    14. 
  
  
  
  
  14. public static final int COMPONENT_STATE_SELECTED = 4;
    15.

实现以及使用：

1创建selector.xml

在resources/base/graphic自定义 shape，定义不同状态的背景，然后将多个shape组合配置到state-container中生成一个新的selector_button.xml文件，提供给控件使用。

定义空状态下的shape背景生成background_btn_empty.xml，其他状态类似：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:shape="rectangle">
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.     
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.     
    9. 
  
  
  
  
  9.

定义按下状态下的背景生成background_btn_pressed.xml：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:shape="rectangle">
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.     
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.     
  
  
  
  
  9.         ohos:color="#FF0000"/>
    10. 
  
  
  
  
  10.

创建selector_button.xml，在ohos:element字段中配置shape背景, ohos:state配置控件状态：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos">
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     
  
  
  
  
  6.         ohos:element="$graphic:background_btn_disabled"
    7. 
  
  
  
  
  7.         ohos:state="component_state_disabled"/>
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.     
  
  
  
  
  10.         ohos:element="$graphic:background_btn_pressed"
    11. 
  
  
  
  
  11.         ohos:state="component_state_pressed"/>
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.     
  
  
  
  
  14.         ohos:element="$graphic:background_btn_empty"
    15. 
  
  
  
  
  15.         ohos:state="component_state_empty"/>
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.

也可以直接使用颜色：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos">
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.     
  
  
  
  
  5.         ohos:element="#ff0000"
    6. 
  
  
  
  
  6.         ohos:state="component_state_disabled"/>
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.     
  
  
  
  
  9.         ohos:element="#00ff00"
    10. 
  
  
  
  
  10.         ohos:state="component_state_pressed"/>
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.     
  
  
  
  
  13.         ohos:element="#0000ff"
    14. 
  
  
  
  
  14.         ohos:state="component_state_empty"/>
    15. 
  
  
  
  
  15. 
  
  
  
  
  16.

2控件中使用

设置控件的背景background_element为状态选择器，并在状态选择器中按需添加不同的状态和不同的状态下的背景：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:height="match_content"
    3. 
  
  
  
  
  3.     ohos:width="match_content"
    4. 
  
  
  
  
  4.     ohos:background_element="$graphic:selector_button"
    5. 
  
  
  
  
  5.     ohos:layout_alignment="horizontal_center"
    6. 
  
  
  
  
  6.     ohos:margin="5vp"
    7. 
  
  
  
  
  7.     ohos:text="Button xml"
    8. 
  
  
  
  
  8.     ohos:text_size="50"
    9. 
  
  
  
  
  9.     />
    10.

3代码中使用

新建不同的状态下的ShapeElement后将其添加到State Element中，并将需要设置状态选择器的部分设置为添加了状态的StateElement，如Button的setBackground、Checkbox的setButtonElement，设置之后相关的控件就会有状态选择器的效果。

3.1 Button

 
 
 
 
    
  
  
  
  
  1. /**
    2. 
  
  
  
  
  2.  * 添加一个Button
    3. 
  
  
  
  
  3.  */
    4. 
  
  
  
  
  4. private void initButton() {
    5. 
  
  
  
  
  5.     // Button在presses状态的element
    6. 
  
  
  
  
  6.     ShapeElement elementButtonPressed = new ShapeElement();
    7. 
  
  
  
  
  7.     elementButtonPressed.setRgbColor(RgbPalette.RED);
    8. 
  
  
  
  
  8.     elementButtonPressed.setShape(ShapeElement.RECTANGLE);
    9. 
  
  
  
  
  9.     elementButtonPressed.setCornerRadius(10);
    10. 
  
  
  
  
  10.     // Button在Disabled状态下的element
    11. 
  
  
  
  
  11.     ShapeElement elementButtonDisable = new ShapeElement();
    12. 
  
  
  
  
  12.     elementButtonDisable.setRgbColor(RgbPalette.GREEN);
    13. 
  
  
  
  
  13.     elementButtonDisable.setShape(ShapeElement.RECTANGLE);
    14. 
  
  
  
  
  14.     elementButtonDisable.setCornerRadius(10);
    15. 
  
  
  
  
  15.     // Button在Empty状态下的element
    16. 
  
  
  
  
  16.     ShapeElement elementButtonEmpty = new ShapeElement();
    17. 
  
  
  
  
  17.     elementButtonEmpty.setRgbColor(RgbPalette.BLUE);
    18. 
  
  
  
  
  18.     elementButtonEmpty.setShape(ShapeElement.RECTANGLE);
    19. 
  
  
  
  
  19.     elementButtonEmpty.setCornerRadius(10);
    20. 
  
  
  
  
  20.     // Button在Hoveered状态下的element
    21. 
  
  
  
  
  21.     ShapeElement elementButtonHovered = new ShapeElement();
    22. 
  
  
  
  
  22.     elementButtonHovered.setRgbColor(RgbPalette.GRAY);
    23. 
  
  
  
  
  23.     elementButtonHovered.setShape(ShapeElement.RECTANGLE);
    24. 
  
  
  
  
  24.     elementButtonHovered.setCornerRadius(10);
    25. 
  
  
  
  
  25.     // 将各种状态下不同的背景添加到StateElement中
    26. 
  
  
  
  
  26.     StateElement stateElement = new StateElement();
    27. 
  
  
  
  
  27.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_PRESSED}, elementButtonPressed);
    28. 
  
  
  
  
  28.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_DISABLED}, elementButtonDisable);
    29. 
  
  
  
  
  29.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_HOVERED}, elementButtonHovered);
    30. 
  
  
  
  
  30.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonEmpty);
    31. 
  
  
  
  
  31. 
  
  
  
  
  32.     // 新建一个button并将其添加到布局中
    33. 
  
  
  
  
  33.     Button button = new Button(this);
    34. 
  
  
  
  
  34.     button.setMarginTop(20);
    35. 
  
  
  
  
  35.     button.setText("Button");
    36. 
  
  
  
  
  36.     button.setTextSize(50);
    37. 
  
  
  
  
  37.     // 设置按钮的状态，若为false，则表示状态为COMPONENT_STATE_DISABLED
    38. 
  
  
  
  
  38.     // button.setEnabled(false);
    39. 
  
  
  
  
  39.     button.setBackground(stateElement);
    40. 
  
  
  
  
  40.     DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(
    41. 
  
  
  
  
  41.             ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
    42. 
  
  
  
  
  42.     layoutConfig.alignment = LayoutAlignment.CENTER;
    43. 
  
  
  
  
  43.     layoutConfig.setMargins(20, 20, 20, 20);
    44. 
  
  
  
  
  44.     button.setLayoutConfig(layoutConfig);
    45. 
  
  
  
  
  45.     dlSelector.addComponent(button);
    46. 
  
  
  
  
  46. }
    47.

3.2 TextField

 
 
 
 
    
  
  
  
  
  1. /**
    2. 
  
  
  
  
  2.  * 添加一个TextField
    3. 
  
  
  
  
  3.  */
    4. 
  
  
  
  
  4. private void initTextField() {
    5. 
  
  
  
  
  5.     // TextField在presses状态的element
    6. 
  
  
  
  
  6.     ShapeElement elementTextFieldPressed = new ShapeElement();
    7. 
  
  
  
  
  7.     elementTextFieldPressed.setRgbColor(RgbPalette.RED);
    8. 
  
  
  
  
  8.     elementTextFieldPressed.setShape(ShapeElement.RECTANGLE);
    9. 
  
  
  
  
  9.     elementTextFieldPressed.setCornerRadius(10);
    10. 
  
  
  
  
  10.     // TextField在Disabled状态下的element
    11. 
  
  
  
  
  11.     ShapeElement elementTextFieldDisable = new ShapeElement();
    12. 
  
  
  
  
  12.     elementTextFieldDisable.setRgbColor(RgbPalette.GRAY);
    13. 
  
  
  
  
  13.     elementTextFieldDisable.setShape(ShapeElement.RECTANGLE);
    14. 
  
  
  
  
  14.     elementTextFieldDisable.setCornerRadius(10);
    15. 
  
  
  
  
  15.     // TextField在Empty状态下的element
    16. 
  
  
  
  
  16.     ShapeElement elementTextFieldEmpty = new ShapeElement();
    17. 
  
  
  
  
  17.     elementTextFieldEmpty.setRgbColor(RgbPalette.BLUE);
    18. 
  
  
  
  
  18.     elementTextFieldEmpty.setShape(ShapeElement.RECTANGLE);
    19. 
  
  
  
  
  19.     elementTextFieldEmpty.setCornerRadius(10);
    20. 
  
  
  
  
  20.     // TextField在Focused状态下的element
    21. 
  
  
  
  
  21.     ShapeElement elementTextFieldFocused = new ShapeElement();
    22. 
  
  
  
  
  22.     elementTextFieldFocused.setRgbColor(RgbPalette.GREEN);
    23. 
  
  
  
  
  23.     elementTextFieldFocused.setShape(ShapeElement.RECTANGLE);
    24. 
  
  
  
  
  24.     elementTextFieldFocused.setCornerRadius(10);
    25. 
  
  
  
  
  25.     //将各种状态下不同的背景添加到StateElement中
    26. 
  
  
  
  
  26.     StateElement stateElement = new StateElement();
    27. 
  
  
  
  
  27.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_PRESSED}, elementTextFieldPressed);
    28. 
  
  
  
  
  28.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_DISABLED}, elementTextFieldDisable);
    29. 
  
  
  
  
  29.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_FOCUSED}, elementTextFieldFocused);
    30. 
  
  
  
  
  30.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementTextFieldEmpty);
    31. 
  
  
  
  
  31. 
  
  
  
  
  32.     //新建一个TextField并将其添加到布局中
    33. 
  
  
  
  
  33.     TextField textField = new TextField(this);
    34. 
  
  
  
  
  34.     textField.setText("TextField");
    35. 
  
  
  
  
  35.     textField.setTextSize(50);
    36. 
  
  
  
  
  36.     // 设置textfield的状态，若为false，则表示状态为COMPONENT_STATE_DISABLED
    37. 
  
  
  
  
  37.     // textField.setEnabled(false);
    38. 
  
  
  
  
  38.     textField.setBackground(stateElement);
    39. 
  
  
  
  
  39.     DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(
    40. 
  
  
  
  
  40.             ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
    41. 
  
  
  
  
  41.     layoutConfig.alignment = LayoutAlignment.CENTER;
    42. 
  
  
  
  
  42.     layoutConfig.setMargins(20, 20, 20, 20);
    43. 
  
  
  
  
  43.     textField.setLayoutConfig(layoutConfig);
    44. 
  
  
  
  
  44.     dlSelector.addComponent(textField);
    45. 
  
  
  
  
  45. }
    46.

3.3 Checkbox

 
 
 
 
    
  
  
  
  
  1. /**
    2. 
  
  
  
  
  2.  * 添加一个Checkbox
    3. 
  
  
  
  
  3.  */
    4. 
  
  
  
  
  4. private void initCheckbox() {
    5. 
  
  
  
  
  5.     // Checkbox在presses状态的element
    6. 
  
  
  
  
  6.     ShapeElement elementCheckboxPressed = new ShapeElement();
    7. 
  
  
  
  
  7.     elementCheckboxPressed.setRgbColor(RgbPalette.RED);
    8. 
  
  
  
  
  8.     elementCheckboxPressed.setShape(ShapeElement.RECTANGLE);
    9. 
  
  
  
  
  9.     elementCheckboxPressed.setCornerRadius(10);
    10. 
  
  
  
  
  10.     // Checkbox在Disabled状态下的element
    11. 
  
  
  
  
  11.     ShapeElement elementCheckboxDisable = new ShapeElement();
    12. 
  
  
  
  
  12.     elementCheckboxDisable.setRgbColor(RgbPalette.GREEN);
    13. 
  
  
  
  
  13.     elementCheckboxDisable.setShape(ShapeElement.RECTANGLE);
    14. 
  
  
  
  
  14.     elementCheckboxDisable.setCornerRadius(10);
    15. 
  
  
  
  
  15.     // Checkbox在Empty状态下的element
    16. 
  
  
  
  
  16.     ShapeElement elementCheckboxEmpty = new ShapeElement();
    17. 
  
  
  
  
  17.     elementCheckboxEmpty.setRgbColor(RgbPalette.BLUE);
    18. 
  
  
  
  
  18.     elementCheckboxEmpty.setShape(ShapeElement.RECTANGLE);
    19. 
  
  
  
  
  19.     elementCheckboxEmpty.setCornerRadius(10);
    20. 
  
  
  
  
  20.     // Checkbox在Checked状态下的element
    21. 
  
  
  
  
  21.     ShapeElement elementCheckboxChecked = new ShapeElement();
    22. 
  
  
  
  
  22.     elementCheckboxChecked.setRgbColor(RgbPalette.GRAY);
    23. 
  
  
  
  
  23.     elementCheckboxChecked.setShape(ShapeElement.RECTANGLE);
    24. 
  
  
  
  
  24.     elementCheckboxChecked.setCornerRadius(10);
    25. 
  
  
  
  
  25.     //将各种状态下不同的背景添加到StateElement中
    26. 
  
  
  
  
  26.     StateElement stateElement = new StateElement();
    27. 
  
  
  
  
  27.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_PRESSED}, elementCheckboxPressed);
    28. 
  
  
  
  
  28.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_DISABLED}, elementCheckboxDisable);
    29. 
  
  
  
  
  29.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementCheckboxChecked);
    30. 
  
  
  
  
  30.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementCheckboxEmpty);
    31. 
  
  
  
  
  31. 
  
  
  
  
  32.     //新建一个button并将其添加到布局中
    33. 
  
  
  
  
  33.     Checkbox checkbox = new Checkbox(this);
    34. 
  
  
  
  
  34.     checkbox.setText("Checkbox");
    35. 
  
  
  
  
  35.     checkbox.setTextSize(50);
    36. 
  
  
  
  
  36.     // 设置按钮的状态，若为false，则表示状态为COMPONENT_STATE_DISABLED
    37. 
  
  
  
  
  37.     // checkbox.setEnabled(false);
    38. 
  
  
  
  
  38.     checkbox.setButtonElement(stateElement);
    39. 
  
  
  
  
  39.     // checkbox点击也会有状态变化
    40. 
  
  
  
  
  40.     // checkbox.setBackground(stateElement);
    41. 
  
  
  
  
  41.     DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(
    42. 
  
  
  
  
  42.             ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
    43. 
  
  
  
  
  43.     layoutConfig.alignment = LayoutAlignment.CENTER;
    44. 
  
  
  
  
  44.     layoutConfig.setMargins(20, 20, 20, 20);
    45. 
  
  
  
  
  45.     checkbox.setLayoutConfig(layoutConfig);
    46. 
  
  
  
  
  46.     dlSelector.addComponent(checkbox);
    47. 
  
  
  
  
  47. }
    48.

本文作者：Zhang Heng 来自鸿蒙三方库联合特战队

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.


网页标题：Selector在HarmonyOS中的使用
网页链接：http://www.wtcwzsj.com/article/cdcijhj.html

其他资讯


关于我们
我们的服务
网站建设案例
新闻动态
联系我们

135-1821-9792

公司服务热线
友情链接： 成都APP制作   乐山服务器托管   成都广告设计公司   德阳柴油发电机   成都文化墙设计   雨棚定制   成都网站推广   广东帝美豪门窗   网站SEO优化排名   成都喷绘设计   

Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有　蜀ICP备19037934号