openharmony 鸿蒙 ndk-build-form-components

2026-08-25 浏览 (1)

构建表单组件

ArkUI NDK提供了多种表单组件，包括按钮（Button）、滑动条Slider、切换按钮（Toggle）、多选框Checkbox、多选框群组CheckboxGroup和单选框（Radio）。这些组件是用户交互的基础元素，可以用于构建丰富的表单界面。

表单组件的相关接口定义在native_node.h中。

本文提供表单组件NDK开发指导，查询之前需要先接入ArkTS页面，具体请参考接入ArkTS页面。

Button按钮组件

Button组件用于创建可点击的按钮，支持多种按钮类型和样式设置。

创建Button组件

使用createNode接口创建Button组件，节点类型为ARKUI_NODE_BUTTON。

std::shared_ptr<NativeModule::ArkUIBaseNode> CreateButtonExample()
{
    auto column = std::make_shared<NativeModule::ArkUIColumnNode>();
    column->SetWidth(1, true);
    column->SetHeight(1, true);
    column->SetBackgroundColor(0x33ff0000);
    column->SetPadding(PARAM_20, false);
    auto button = std::make_shared<NativeModule::ArkUIButtonNode>();
    button->SetButtonLabel("This is a Button");
    button->SetMaxFontScale(1.0);
    auto circleBtn = std::make_shared<NativeModule::ArkUIButtonNode>();
    circleBtn->SetButtonLabel("Circle");
    circleBtn->SetButtonType(ARKUI_BUTTON_TYPE_CIRCLE);
    circleBtn->SetMargin(PARAM_20, false);
    column->AddChild(button);
    column->AddChild(circleBtn);
    // 将Column添加到Content中
    return column;
}

设置Button类型

Button组件支持通过设置NODE_BUTTON_TYPE属性实现不同的按钮类型，包括普通按钮、胶囊按钮、圆形按钮和圆角矩形按钮。按钮类型对应枚举请参考ArkUI_ButtonType。

下述示例将按钮类型设置为ARKUI_BUTTON_TYPE_CIRCLE圆形按钮。

auto circleBtn = std::make_shared<NativeModule::ArkUIButtonNode>();
circleBtn->SetButtonLabel("Circle");
circleBtn->SetButtonType(ARKUI_BUTTON_TYPE_CIRCLE);
circleBtn->SetMargin(PARAM_20, false);

Button属性

Button独有属性如下，具体说明请参考ArkUI_NodeAttributeType中的枚举定义。

属性说明
NODE_BUTTON_LABEL设置按钮文本标签。
NODE_BUTTON_TYPE设置按钮类型。
NODE_BUTTON_MIN_FONT_SCALE设置最小字体缩放比例。从API version 18开始支持。
NODE_BUTTON_MAX_FONT_SCALE设置最大字体缩放比例。从API version 18开始支持。

Slider滑动条组件

Slider组件用于创建滑动条，用户可以通过拖动滑块来选择数值。

创建Slider组件

使用createNode接口创建Slider组件，节点类型为ARKUI_NODE_SLIDER。

std::shared_ptr<NativeModule::ArkUIBaseNode> CreateSliderExample()
{
    auto column = std::make_shared<NativeModule::ArkUIColumnNode>();
    column->SetWidth(1, true);
    column->SetHeight(1, true);
    column->SetBackgroundColor(0x33ff0000);
    column->SetPadding(PARAM_20, false);
    auto sliderInSet = std::make_shared<NativeModule::ArkUISliderNode>();
    sliderInSet->SetSliderValue(PARAM_50);
    sliderInSet->SetSliderStep(PARAM_10);
    sliderInSet->SetSliderStyle(ARKUI_SLIDER_STYLE_IN_SET);
    sliderInSet->SetBlockColor(0xFF00FF00);
    sliderInSet->SetTrackColor(0xFFFFFF00);
    auto sliderOutSet = std::make_shared<NativeModule::ArkUISliderNode>();
    sliderOutSet->SetSliderValue(PARAM_50);
    sliderOutSet->SetSliderStep(PARAM_10);
    sliderOutSet->SetSliderStyle(ARKUI_SLIDER_STYLE_OUT_SET);
    sliderOutSet->SetMargin(PARAM_20, false);
    sliderOutSet->SetSliderDirection(ARKUI_SLIDER_DIRECTION_VERTICAL);
    sliderOutSet->SetIsReverse(true);
    sliderOutSet->SetIsShowSteps(true);
    column->AddChild(sliderInSet);
    column->AddChild(sliderOutSet);
    return column;
}

设置Slider样式

Slider支持两种样式，通过ARKUI_SliderStyle枚举定义：

  • ARKUI_SLIDER_STYLE_OUT_SET：滑块在滑动条外（默认值）。
  • ARKUI_SLIDER_STYLE_IN_SET：滑块在滑动条内。

如下示例代码创建了ARKUI_SLIDER_STYLE_IN_SET样式的Slider组件并设置了滑块和滑轨颜色。

auto sliderInSet = std::make_shared<NativeModule::ArkUISliderNode>();
sliderInSet->SetSliderValue(PARAM_50);
sliderInSet->SetSliderStep(PARAM_10);
sliderInSet->SetSliderStyle(ARKUI_SLIDER_STYLE_IN_SET);
sliderInSet->SetBlockColor(0xFF00FF00);
sliderInSet->SetTrackColor(0xFFFFFF00);

设置Slider方向和步长

Slider支持设置滑动方向（水平或垂直）、是否反向以及是否显示步长刻度。

auto sliderOutSet = std::make_shared<NativeModule::ArkUISliderNode>();
sliderOutSet->SetSliderValue(PARAM_50);
sliderOutSet->SetSliderStep(PARAM_10);
sliderOutSet->SetSliderStyle(ARKUI_SLIDER_STYLE_OUT_SET);
sliderOutSet->SetMargin(PARAM_20, false);
sliderOutSet->SetSliderDirection(ARKUI_SLIDER_DIRECTION_VERTICAL);
sliderOutSet->SetIsReverse(true);
sliderOutSet->SetIsShowSteps(true);

Slider属性

Slider独有属性如下，具体说明请参考ArkUI_NodeAttributeType中的枚举定义。

属性说明
NODE_SLIDER_VALUE设置当前进度值。
NODE_SLIDER_MIN_VALUE设置最小值。
NODE_SLIDER_MAX_VALUE设置最大值。
NODE_SLIDER_STEP设置滑动步长。
NODE_SLIDER_DIRECTION设置滑动条方向。
NODE_SLIDER_REVERSE设置是否反向。
NODE_SLIDER_STYLE设置滑动条样式。
NODE_SLIDER_BLOCK_COLOR设置滑块颜色。
NODE_SLIDER_TRACK_COLOR设置轨道颜色。
NODE_SLIDER_SELECTED_COLOR设置已选择部分颜色。
NODE_SLIDER_SHOW_STEPS设置是否显示步长刻度。

Toggle开关组件

Toggle组件用于创建开关，用户可以在开和关两种状态之间切换。

创建Toggle组件

使用createNode接口创建Toggle组件，节点类型为ARKUI_NODE_TOGGLE。

std::shared_ptr<NativeModule::ArkUIBaseNode> CreateToggleExample()
{
    auto column = std::make_shared<NativeModule::ArkUIColumnNode>();
    column->SetWidth(1, true);
    column->SetHeight(1, true);
    column->SetBackgroundColor(0x33ff0000);
    column->SetPadding(PARAM_20, false);
    auto toggle = std::make_shared<NativeModule::ArkUIToggleNode>();
    toggle->SetSelectedColor(0xFFFF0000);
    toggle->SetUnSelectedColor(0xFF0000FF);
    toggle->SetSwitchPointColor(0xFF00FF00);
    column->AddChild(toggle);

    return column;
}

设置Toggle样式

可以设置Toggle开启状态背景色、关闭状态背景色以及滑块颜色。

toggle->SetSelectedColor(0xFFFF0000);
toggle->SetUnSelectedColor(0xFF0000FF);
toggle->SetSwitchPointColor(0xFF00FF00);

Toggle属性

Toggle独有属性如下，具体说明请参考ArkUI_NodeAttributeType中的枚举定义。

属性说明
NODE_TOGGLE_VALUE设置开关状态。
NODE_TOGGLE_SELECTED_COLOR设置开启状态背景色。
NODE_TOGGLE_UNSELECTED_COLOR设置关闭状态背景色。
NODE_TOGGLE_SWITCH_POINT_COLOR设置滑块颜色。

Checkbox多选框组件

Checkbox组件用于创建多选框，用户可以选中或取消选中。CheckboxGroup用于管理多个多选框，实现全选等操作。

创建Checkbox组件

使用createNode接口创建Checkbox组件，节点类型为ARKUI_NODE_CHECKBOX。

std::shared_ptr<NativeModule::ArkUIBaseNode> CreateCheckboxExample()
{
    auto column = std::make_shared<NativeModule::ArkUIColumnNode>();
    column->SetWidth(1, true);
    column->SetHeight(1, true);
    column->SetBackgroundColor(0x33ff0000);
    column->SetPadding(PARAM_20, false);
    auto checkbox1 = std::make_shared<NativeModule::ArkUICheckboxNode>();
    auto checkbox2 = std::make_shared<NativeModule::ArkUICheckboxNode>();
    auto checkbox3 = std::make_shared<NativeModule::ArkUICheckboxNode>();
    auto checkboxGroup = std::make_shared<NativeModule::ArkUICheckboxGroupNode>();
    checkboxGroup->SetCheckboxGroupName("check_group");
    checkbox1->SetCheckboxGroup("check_group");
    checkbox1->SetSelectColor(0xFFFF0000);
    checkbox2->SetCheckboxGroup("check_group");
    checkbox2->SetUnSelectColor(0xFFFF0000);
    checkbox3->SetCheckboxGroup("check_group");
    checkbox3->SetCheckboxShape(ArkUI_CHECKBOX_SHAPE_ROUNDED_SQUARE);
    checkbox1->SetCheckboxName("check_group1");
    checkbox2->SetCheckboxName("check_group2");
    checkbox3->SetCheckboxName("check_group3");

    column->AddChild(checkboxGroup);
    column->AddChild(checkbox1);
    column->AddChild(checkbox2);
    column->AddChild(checkbox3);

    // 将Column添加到Content中
    return column;
}

创建CheckboxGroup

CheckboxGroup用于管理同一组内的多个多选框，节点类型为ARKUI_NODE_CHECKBOX_GROUP。

auto checkboxGroup = std::make_shared<NativeModule::ArkUICheckboxGroupNode>();
checkboxGroup->SetCheckboxGroupName("check_group");

设置Checkbox属性

可以设置多选框的选中颜色、未选中颜色、形状以及所属组名。

checkbox1->SetCheckboxGroup("check_group");
checkbox1->SetSelectColor(0xFFFF0000);
checkbox2->SetCheckboxGroup("check_group");
checkbox2->SetUnSelectColor(0xFFFF0000);
checkbox3->SetCheckboxGroup("check_group");
checkbox3->SetCheckboxShape(ArkUI_CHECKBOX_SHAPE_ROUNDED_SQUARE);
checkbox1->SetCheckboxName("check_group1");
checkbox2->SetCheckboxName("check_group2");
checkbox3->SetCheckboxName("check_group3");

Checkbox属性

Checkbox独有属性如下，具体说明请参考ArkUI_NodeAttributeType中的枚举定义。

属性说明
NODE_CHECKBOX_SELECT设置是否选中。
NODE_CHECKBOX_SELECT_COLOR设置选中状态颜色。
NODE_CHECKBOX_UNSELECT_COLOR设置未选中状态颜色。
NODE_CHECKBOX_MARK设置勾选标记样式。
NODE_CHECKBOX_SHAPE设置多选框形状。
NODE_CHECKBOX_NAME设置多选框名称。从API version 15开始支持。
NODE_CHECKBOX_GROUP设置多选框组名称，用于CheckboxGroup管理。从API version 15开始支持。

CheckboxGroup属性

CheckboxGroup独有属性如下，具体说明请参考ArkUI_NodeAttributeType中的枚举定义。

属性说明
NODE_CHECKBOX_GROUP_NAME设置多选框群组名称。从API version 15开始支持。
NODE_CHECKBOX_GROUP_SELECT_ALL设置是否全选。从API version 15开始支持。
NODE_CHECKBOX_GROUP_SELECTED_COLOR设置选中状态颜色。从API version 15开始支持。
NODE_CHECKBOX_GROUP_UNSELECTED_COLOR设置未选中状态颜色。从API version 15开始支持。
NODE_CHECKBOX_GROUP_MARK设置勾选标记样式。从API version 15开始支持。
NODE_CHECKBOX_GROUP_SHAPE设置多选框形状。从API version 15开始支持。

Radio单选按钮组件

Radio组件用于创建单选按钮，同一组内的单选按钮只能选中一个。

创建Radio组件

使用createNode接口创建Radio组件，节点类型为ARKUI_NODE_RADIO。

std::shared_ptr<NativeModule::ArkUIBaseNode> CreateRadioExample()
{
    auto column = std::make_shared<NativeModule::ArkUIColumnNode>();
    column->SetWidth(1, true);
    column->SetHeight(1, true);
    column->SetBackgroundColor(0x33ff0000);
    column->SetPadding(PARAM_20, false);
    auto radio1 = std::make_shared<NativeModule::ArkUIRadioNode>();
    auto radio2 = std::make_shared<NativeModule::ArkUIRadioNode>();
    auto radio3 = std::make_shared<NativeModule::ArkUIRadioNode>();
    radio1->SetIsOn(true);
    radio1->SetRadioGroup("radio_group");
    radio2->SetRadioGroup("radio_group");
    radio3->SetRadioGroup("radio_group");
    radio3->SetRadioStyle(0xFFFF0000, 0xFF00FF00, 0xFF00FFFF);

    column->AddChild(radio1);
    column->AddChild(radio2);
    column->AddChild(radio3);

    return column;
}

设置Radio组

同一组内的Radio组件只能选中一个，通过设置相同的组名实现互斥。

radio1->SetIsOn(true);
radio1->SetRadioGroup("radio_group");
radio2->SetRadioGroup("radio_group");
radio3->SetRadioGroup("radio_group");

设置Radio样式

可以设置单选按钮的样式，包括未选中状态颜色、选中状态内部圆环颜色和选中状态外环颜色。

radio3->SetRadioStyle(0xFFFF0000, 0xFF00FF00, 0xFF00FFFF);

Radio属性

Radio独有属性如下，具体说明请参考ArkUI_NodeAttributeType中的枚举定义。

属性说明
NODE_RADIO_CHECKED设置是否选中。
NODE_RADIO_STYLE设置单选框选中状态和非选中状态的样式（包括开启状态底板颜色、关闭状态描边颜色、开启状态内部圆饼颜色）。
NODE_RADIO_VALUE设置单选按钮值。
NODE_RADIO_GROUP设置所属组名，同一组内的Radio互斥。

完整示例

  • NativeFormExample：包含Button、Slider、Toggle、Checkbox、Radio组件的完整示例。

你可能感兴趣的鸿蒙文章

openharmony 鸿蒙 arkts-common-components-text-input

openharmony 鸿蒙 arkts-select-component-faq

openharmony 鸿蒙 arkui-overview

openharmony 鸿蒙 js-framework-syntax-css

openharmony 鸿蒙 arkts-popup-and-menu-components-popup

openharmony 鸿蒙 arkts-navigation-animation-faq

openharmony 鸿蒙 arkts-rotation-transition-animation

openharmony 鸿蒙 arkts-popup-and-menu-components-uicontext-popup

openharmony 鸿蒙 arkts-styled-string

openharmony 鸿蒙 arkts-attribute-animation-overview

  • 所属分类： 后端技术
  • 本文标签： 鸿蒙 软件
  • 版权声明： 本文链接 https://seaxiang.com/blog/jfh11bLJ