(Arkts界面示例)ets pages Demo(笔记版本0.0.1)

数据类型	概述
number	数值
boolean	布尔
string	字符串
undefined	一个未定义或不存在的值
null	空
object	对象
Symbol	独一无二的值
bigint	任意大的整数
enum	枚举
any	任意
unknown	未知类型
void	没有任何返回值的类型
never	永远不存在的类型

 

Index.ets 文件

import router from '@ohos.router'@Entry//表示该自定义组件为入口组件
@Component //表示自定义组件
struct Index {//表示组件中的状态变量，状态变量变化会触发UI刷新@State changeValue: string = ''@State submitValue: string = ''controller: SearchController = new SearchController()build() {Column() {Search({ value: this.changeValue, placeholder: 'file name', controller: this.controller }).searchButton('SEARCH').width(300).height(50).backgroundColor('#F5F5F5').placeholderColor(Color.Grey).placeholderFont({ size: 15, weight: 550 }).textFont({ size: 15, weight: 500 }).copyOption(CopyOptions.InApp).onSubmit((value: string) => {this.submitValue = valuerouter.pushUrl({url:'pages/'+this.submitValue})}).onChange((value: string) => {this.changeValue = value}).margin(20)}.width('100%')}
}

 hello.ets

import router from '@ohos.router'@Entry
@Component
struct hello{build() {Column({ space: 5 }) {Text('首页').onClick(() => {router.pushUrl({ url: 'pages/Index' })})Text('Hello worid').fontSize(20)}.width('100%').margin({top:10})}
}

API参考 Search Flex布局 > pages/flex_n.ets > struct FlexExample

API参考 Search 边框设置 > pages/border_n.ets > struct BorderExample

API参考 Search 图片边框设置 > pages/image_border_setting_n1.ets >struct image_border_setting_n1

API参考 Search 图片边框设置 > pages/image_border_setting_n2.ets >struct image_border_setting_n2

API参考 Search 背景设置 > pages/background_n.ets >struct BackgroundExample

API参考 Search 透明度设置 > pages/opacity_n.ets >struct OpacityExample

API参考 Search 显隐控制 > pages/visibility_n.ets >struct VisibilityExample

API参考 Search 禁用控制 > pages/enabled_n.ets >struct EnabledExample

API参考 Search 浮层 > pages/overlay_n.ets >struct OverlayExample

API参考 Search Z序控制 > pages/zindex_n.ets >struct ZIndexExample

API参考 Search 图形变换 > pages/transform_n.ets >struct TransformExample

API参考 Search 图形效果 > pages/blur_n1.ets >struct BlurEffectsExample

API参考 Search 图形效果 > pages/image_effects_n2.ets >struct ImageEffectsExample

API参考 Search 形状裁剪 > pages/clip_and_mask_n.ets >struct ClipAndMaskExample

API参考 Search 文本样式设置 > pages/text_style_n.ets >struct TextStyleExample

API参考 Search 栅格设置 > pages/grid_container_n.ets >struct GridContainerExample1

API参考 Search 颜色渐变 > pages/color_gradient_n1.ets >struct ColorGradientExample

API参考 Search 颜色渐变 > pages/color_gradient_n2.ets >struct ColorGradientExample

API参考 Search 颜色渐变 > pages/color_gradient_n3.ets >struct ColorGradientExample

API参考 Search Popup控制 > pages/popup_n.ets >struct PopupExample

API参考 Search 菜单控制 > pages/menu_n1.ets >struct PopupExample

API参考 Search 菜单控制 > pages/menu_n2.ets >struct PopupExample

API参考 Search 菜单控制 > pages/menu_n3.ets >struct ContextMenuExample

API参考 Search 点击控制 > pages/touch_able.ets >struct TouchAbleExample

API参考 Search 焦点控制 > pages/focusable_n.ets >struct FocusableExample

API参考 Search 焦点控制 > pages/request_foucus_n2.ets >struct RequestFocusExample

API参考 Search 悬浮态效果 > pages/hover_n.ets >struct HoverExample

API参考 Search 组件标识 > pages/id_n.ets >struct IdExample

API参考 Search  触摸热区设置 > pages/touch_target_n.ets >struct TouchTargetExample

API参考 Search  多态样式 > pages/style_n.ets >struct StyleExample

API参考 Search  触摸测试样式 > pages/hit_test_behavior_n.ets >struct HitTestBehaviorExample

API参考 Search  分布式迁移标识 > pages/restore_id_n.ets >struct RestoreIdExample

API参考 Search  绑定手势方法 > pages/gesture_settings_n.ets >struct GestureSettingsExample

API参考 Search  绑定手势方法 > pages/gesture_settings_n.ets >struct GestureSettingsExample

API参考 Search  基础手势 > pages/gesture_settings_n.ets >struct GestureSettingsExample

API参考 Search  基础手势 > pages/tap_gesture_n.ets >struct TapGestureExample

API参考 Search  基础手势 > pages/long_press_n.ets >struct LongPressGestureExample

API参考 Search  基础手势 > pages/long.ets >struct LongPressGestureExample

API参考 Search  基础手势 > pages/pan_gesrure_n.ets >struct PanGestureExample

API参考 Search  基础手势 > pages/pan_gesrure_n.ets >struct PanGestureExample

API参考 Search  基础手势 > pages/rotation_gesrure_n.ets >struct RotationGesture

API参考 Search  基础手势 > pages/swipe_gesture_n.ets >struct SwipeGesture

API参考 Search  组合手势 > pages/gesture_group_n.ets >struct GestureGroupExample

API参考 Search  组合手势 > pages/gesture_group_n.ets >struct GestureGroupExample

AlphabetIndexer(字母 索引器 示例)

可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。

API参考 Search  AlphabetIndexer > pages/alphabel_indexer.ets >struct AlphabetIndexerSample

Blank(空白填充组件)

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。

API参考 Search Blank 基础组件 > pages/bank_n.ets >struct BlankExample

Button(按钮组件)

按钮组件  可快速创建不同样式的按钮。

API参考 Search Button  基础组件 > pages/button_n1.ets >struct ButtonExample

API参考 Search Button  基础组件 > pages/button_n2.ets >struct SwipeGestureExample

Checkbox(多选框组件)

提供多选框组件，通常用于某选项的打开或关闭。

API参考 Search Checkbox  基础组件 > pages/checkbox_n.ets >struct CheckboxExample

CheckboxGroup(多选框群组)

多选框群组，用于控制多选框全选或者不全选状态。

API参考 Search CheckboxGroup  基础组件 > pages/checkbox_group_n.ets >struct CheckboxGroup

DataPanel(数据面板组件)

数据面板组件，用于将多个数据占比情况使用占比图进行展示。

API参考 Search DataPanel  基础组件 > pages/data_panel_n.ets >struct DataPanel

DatePicker(日期选择器组件)

日期选择器组件，用于根据指定日期范围创建日期滑动选择器。

API参考 Search DatePicker  基础组件 > pages/data_picker_n.ets >struct DatePickerExample

Divider(分隔器组件)

提供分隔器组件，分隔不同内容块/内容元素。

API参考 Search  Divider  基础组件 > pages/divider_n.ets >struct DividerExample

Gauge(数据量规图表组)

数据量规图表组件，用于将数据展示为环形图表。

API参考 Search  Gauge 基础组件 > pages/gauge_n.ets >struct GaugeExample

Image

图片组件，支持本地图片和网络图片的渲染展示。

API参考 Search  Image  基础组件 > pages/image_n1.ets >struct ImageExample1

API参考 Search  Image  基础组件 > pages/image_n2.ets >struct Index

API参考 Search  Image  基础组件 > pages/image_n3.ets >struct ImageExample2

API参考 Search  Image  基础组件 > pages/image_n4.ets >struct ImageExample2

API参考 Search  Image  基础组件 > pages/image_n5.ets >struct ImageExample2