Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 b651e4dd 编写于 作者: Z zengyawen 提交者： Gitee
浏览文件
操作

update docs 

Signed-off-by: Nzengyawen <zengyawen1@huawei.com>
上级 a5f90cf8
隐藏空白更改
内联 并排
Showing with 1148 addition and 66 deletion
zh-cn/application-dev/faqs/faqs-arkui-animation-interactive-event.md
浏览文件 @ b651e4dd
# ArkUI动画/交互事件开发常见问题(ArkTS)
## 焦点事件onBlur/onFocus回调无法触发
适用于 OpenHarmony 3.2 Beta5 API 9
**问题现象**
焦点事件onBlur/onFocus回调无法触发
**解决措施**
焦点事件默认情况下需要外接键盘的Tab键，或方向键触发，点击触发焦点事件需要添加焦点控制属性focusOnTouch。
**参考链接**
[焦点控制](../reference/arkui-ts/ts-universal-attributes-focus.md)
## scroll里面套一个grid，如何禁用grid的滑动事件
适用于 OpenHarmony 3.2 Beta5 API 9
可以通过onScrollFrameBegin事件和scrollBy方法实现容器嵌套滚动。
可参考：[容器嵌套滚动样例](../reference/arkui-ts/ts-container-scroll.md#%E7%A4%BA%E4%BE%8B2)
## 如何实现一个组件不停地旋转
适用于 OpenHarmony 3.2 Beta5 API 9
可以通过[属性动画](../reference/arkui-ts/ts-animatorproperty.md)的方式实现。
## 列表目前无法键盘上下滑动，是否能力不支持
适用于 OpenHarmony 3.2 Beta5 API 9
**解决措施**
有以下两种方案：
1. 需要在列表子项中添加focusable\(true\)进行获焦。
2. 在每个item的外层嵌套一个可获焦组件，例如Button。
## 键盘移动焦点对象按下enter，为什么不会触发点击事件
适用于 OpenHarmony 3.2 Beta5 API 9
组件的内置的点击事件和开发者自定义的onClick点击事件默认会和空格键绑定，并非与enter键绑定（UX规格）。
## 多层组件嵌套button，如何阻止事件传递
适用于 OpenHarmony 3.2 Beta5 API 9
可以通过将button组件绑定参数stopPropagation来控制冒泡传递。
## 使用router或Navigator实现页面跳转时，如何关闭页面间转场动效
适用于 OpenHarmony 3.2 Beta5 API 9
1. 参考[页面间转场示例](../reference/arkui-ts/ts-page-transition-animation.md#示例)在当前页面和目标页面中定义pageTransition方法。
2. 将页面入场组件PageTransitionEnter和页面退场组件PageTransitionExit的动效参数duration都设置为0。
## 在容器组件嵌套的场景下，如何解决手势拖拽事件出现错乱的问题
适用于 OpenHarmony 3.2 Beta5 API 9
PanGesture用于触发拖动手势事件，滑动的最小距离distance默认为5vp时拖动手势识别成功。可以将distance值设为1，使拖动更灵敏，避免造成事件错乱。
**参考链接**
[PanGesture](../reference/arkui-ts/ts-basic-gestures-pangesture.md)
## 基于OpenHarmony开发的应用，是否支持使用fontFamily属性设置不同的字体
适用于：OpenHarmony 3.2 Beta5 API 9
基于OpenHarmony开发的应用，默认字体'HarmonyOS Sans'，且当前只支持这种字体。
## 点击输入框时会拉起软键盘，点击button时软键盘关闭要如何实现
适用于 OpenHarmony 3.2 Beta5 API 9
TextInput获取焦点会弹出输入法，失去焦点就会关闭软键盘，使用focusControl控制焦点即可关闭软件盘。
**代码示例**
```
build() {
Column() {
TextInput()
Button(`hide`)
.key('button')
.onClick(()=>{
focusControl.requestFocus('button')
})
}
}
```
## 当父组件绑定了onTouch，其子组件Button绑定了onClick，如何做到点击Button只响应Button的onClick，而不用响应父组件的onTouch？
适用于 OpenHarmony 3.2 Beta5 API 9
可以在Button组件中绑定onTouch，并在onTouch中使用stopPropagation\(\)阻止onTouch冒泡传递到父组件阻止冒泡传递。
**代码示例**
```
build() {
Row() {
Button("点击我")
.width(100)
.width(100)
.backgroundColor('#f00')
.onClick(()=>{
console.log("Button onClick")
})
.onTouch((e) => {
console.log("Button onTouch")
e.stopPropagation()
})
}
.onTouch(() => {
console.log("Row onTouch")
})
}
```
## 绑定菜单后无法使用右键触发菜单
适用于：OpenHarmony 3.2 Beta API 9
**解决措施**
目前菜单仅支持点击、长按触发方式，没有右键方式。
## 点击文本输入框，如何屏蔽系统默认键盘弹起行为？
适用于：OpenHarmony 3.2 Beta5 API 9
设置TextInput组件的focusable属性为false，此组件则不可获焦，就不会拉起系统默认的键盘。
## 如何实现上下切换的页面间跳转动画
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
页面切换时如何实现上下切换动画
**解决措施**
可以使用pageTransition函数来实现页面转场效果，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果，将其slide属性设置为SlideEffect.Bottom，则页面入场时从下边划入，出场时滑出到下边，即可实现上下切换效果。
**代码示例**
```
// Index.ets
@Entry
@Component
struct PageTransition1 {
build() {
Stack({alignContent: Alignment.Bottom}) {
Navigator({ target: 'pages/Page1'}) {
Image($r('app.media.ic_banner01')).width('100%').height(200) // 图片存放在media文件夹下
}
}.height('100%').width('100%')
}
pageTransition() {
PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
}
}
```
```
// Page1.ets
@Entry
@Component
struct PageTransition2 {
build() {
Stack({alignContent: Alignment.Bottom}) {
Navigator({ target: 'pages/Index'}) {
Image($r('app.media.ic_banner02')).width('100%').height(200) // 图片存放在media文件夹下
}
}.height('100%').width('100%')
}
pageTransition() {
PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
}
}
```
**参考链接**
[页面转场动画](https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/ui/arkts-page-transition-animation.md/)
## 自定义组件间如何实现从底部滑入滑出的效果
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
一个页面底部默认显示自定义组件A，点击自定义组件A，则A消失，自定义组件B从底部出现；点击自定义组件B，则组件B消失，A从底部出现。这个效果要如何实现？
**解决措施**
可以使用transition产生组件转场动画，其参数type用来设置组件变化场景，包括新增和删除；参数translate用来设置转场时的平移效果。注意transition需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置。
**代码示例**
```
@Entry
@Component
struct ComponentTransition {
@State flag: boolean = true;
build() {
Stack({alignContent: Alignment.Bottom}) {
if (this.flag) {
ComponentChild1({ flag: $flag })
.transition({ type: TransitionType.Insert,translate: { x: 0, y: 200 } })
}
if (!this.flag) {
ComponentChild2({ flag: $flag })
.transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } })
}
}.height('100%').width('100%')
}
}
@Component
struct ComponentChild1 {
@Link flag: boolean
build() {
Column() {
Image($r('app.media.ic_banner01'))
.width('100%')
.height(200)
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.flag = !this.flag;
})
})
}
}
}
@Component
struct ComponentChild2 {
@Link flag: boolean
build() {
Column() {
Image($r('app.media.ic_banner02'))
.width('100%')
.height(200)
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.flag = !this.flag;
})
})
}
}
}
```
**参考链接**
[组件内转场动画](https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/ui/arkts-transition-animation-within-component.md/)
zh-cn/application-dev/faqs/faqs-arkui-arkts.md
浏览文件 @ b651e4dd
# ArkUI开发框架（ArkTS语法）
# ArkTS语法使用常见问题
## ArkUI如何通过代码动态创建组件
......
zh-cn/application-dev/faqs/faqs-arkui-component.md
浏览文件 @ b651e4dd
# ArkUI组件开发常见问题(ArkTS)
## 自定义弹窗能否在ts文件中定义和使用
适用于：OpenHarmony 3.2 Beta5 API 9
自定义弹窗的定义和初始化需要用到属于ArkTS语法内容，必须在ets后缀文件中定义使用，不能在ts后缀文件中定义使用。
**参考链接**
[自定义弹窗](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
## 自定义弹窗中的变量如何传递给页面
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
在自定义弹窗内定义的变量内容，在关闭弹窗或变量变化时需要及时传递给页面，可以通过何种方式传递？
**解决措施**
- 方式一：使用组件的状态变量传递。
- 方式二：在初始化弹窗时，传递一个方法给自定义弹窗，在自定义弹窗中触发该方法，弹窗中变量作为方法的参数。
- 方式三：使用AppStorage或LocalStorage方式管理页面状态，实现自定义弹窗和页面之间状态的共享。
**代码示例**
- 方式一：
```
@CustomDialog
struct CustomDialog01 {
@Link inputValue: string
controller: CustomDialogController
build() {
Column() {
Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
.onChange((value: string) => {
this.inputValue = value
})
}
}
}
@Entry
@Component
struct DialogDemo01 {
@State inputValue: string = 'click me'
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialog01({
inputValue: $inputValue
})
})
build() {
Column() {
Button(this.inputValue)
.onClick(() => {
this.dialogController.open()
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}
```
- 方式二：
```
@CustomDialog
struct CustomDialog02 {
private inputValue: string
changeInputValue: (val: string) => void
controller: CustomDialogController
build() {
Column() {
Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
.onChange((value: string) => {
this.changeInputValue(value)
})
}
}
}
@Entry
@Component
struct DialogDemo02 {
@State inputValue: string = 'click me'
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialog02({
inputValue: this.inputValue,
changeInputValue: (val: string) => {
this.inputValue = val
}
})
})
build() {
Column() {
Button(this.inputValue)
.onClick(() => {
this.dialogController.open()
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}
```
- 方式三：
```
let storage = LocalStorage.GetShared()
@CustomDialog
struct CustomDialog03 {
@LocalStorageLink('inputVal') inputValue: string = ''
controller: CustomDialogController
build() {
Column() {
Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
.onChange((value: string) => {
this.inputValue = value;
})
}
}
}
@Entry(storage)
@Component
struct DialogDemo03 {
@LocalStorageLink('inputVal') inputValue: string = ''
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialog03()
})
build() {
Column() {
Button(this.inputValue)
.onClick(() => {
this.dialogController.open()
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}
```
## 如何获取组件的宽高
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
组件的宽高信息用于计算布局区域大小以及偏移量等内容，如何获取宽高信息？
**解决措施**
- 方式一：使用组件区域变化事件onAreaChange，在组件初始化或组件尺寸发生变化时触发。
- 方式二：在点击或触摸事件中，事件的回调信息中存在目标元素的区域信息。
**参考链接**
[组件区域变化事件](../reference/arkui-ts/ts-universal-component-area-change-event.md)，[点击事件](../reference/arkui-ts/ts-universal-events-click.md)，[触摸事件](../reference/arkui-ts/ts-universal-events-touch.md)
## 如何一键清空TextInput、TextArea组件内容
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
TextInput，TextArea组件输入多字符后，需要实现点击清空。
**解决措施**
将状态变量赋值给TextInput或TextArea组件的text属性，在做点击清空事件时为状态变量赋值空字符串。
**代码示例**
```
struct Index {
@State text: string = 'Hello World'
controller: TextInputController = new TextInputController()
build() {
Row() {
Column() {
TextInput({ placeholder: 'Please input your words.', text: this.text,
controller:this.controller}).onChange((value) => {
this.text = value
})
Button("Clear TextInput").onClick(() => {
this.text = "";
})
}
.width('100%')
}
.height('100%')
}
}
```
## 如何设置自定义弹窗位置
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
自定义弹窗当前默认在窗口居中显示，当自定义弹窗需要与窗口边框对齐是需要设置自定义弹窗的对齐方式。
**解决措施**
初始化自定义弹窗时，通过alignment参数设置对齐方式，通过offset设置弹窗偏移量。
**参考链接**
[自定义弹窗](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
## 如何隐藏容器组件的溢出内容
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
当容器组件内容溢出时，表现为子组件边缘超出容器组件，需要进行隐藏设置。
**解决措施**
将通用属性-形状裁剪clip属性设置为true，表示按照容器边缘轮廓进行裁剪。此属性默认为false，表示不进行裁剪隐藏。
**参考链接**
[形状裁剪](../reference/arkui-ts/ts-universal-attributes-sharp-clipping.md)
## 自定义弹窗大小如何自适应内容
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
当自定义弹窗中存在可变化区域大小的子组件时，弹窗大小需要跟随自适应。
**解决措施**
- 方式一：采用弹窗容器默认样式。在默认样式中，弹窗容器高度自适应子节点，最大可为窗口高度的90%；弹窗容器的宽度根据栅格系统自适应，不跟随子节点变化。
- 方式二：当显示设置customStyle为true时，弹窗宽高跟随子节点内容适应。
**参考链接**
[自定义弹窗](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
## 如何理解自定义弹窗中的gridCount参数
适用于：OpenHarmony 3.2 Beta5 API 9
gridCount参数是指弹窗宽度占栅格列数的个数。系统把窗口宽等分，等分的份数即为栅格列数，不同设备栅格列数不同。比如手机屏幕密度值在320vp<=水平宽度<600vp，所以栅格列数是4，则gridCount的有效值在\[1, 4\]。
注意：仅采用弹窗默认样式时设置有效。
**参考链接**
[自定义弹窗](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
## 如何去除自定义弹窗的白色背景
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
使用自定义弹窗时，默认样式中存在白色背景。
**解决措施**
需要采用自定义样式来消除自定义弹窗的白色背景：
1. 在初始化自定义弹窗时设置customStyle为true。
2. 在定义弹窗时设置组件背景色backgroundColor。
**参考链接**
[自定义弹窗](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
## TextInput组件密码模式下，右边的眼睛图标能否支持自定义
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
TextInput组件设置type为InputType.Password时，右侧出现眼睛图标，不能修改图标样式。
**解决措施**
当前图标不支持自定义，可使用TextInput的showPasswordIcon属性隐藏图标，使用Image组件替代控制TextInput组件的type。
**参考链接**
[TextInput组件](../reference/arkui-ts/ts-basic-components-textinput.md)
## TextInput的onSubmit事件如何使用
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
TextInput的onSubmit事件怎么触发，以及事件回调的参数类型代表的含义。
**解决措施**
onSubmit事件在外接键盘或软键盘回车时触发该回调，回调的参数为当前软键盘回车键类型。通过TextInput的enterKeyType属性可以设置输入法回车键类型，软键盘回车键样式需要输入法的支持。
**参考链接**
[TextInput组件](../reference/arkui-ts/ts-basic-components-textinput.md)
## TextInput在聚焦时如何使光标回到起点
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
TextInput组件在聚焦时，光标位置会自动根据触摸点位置变化，如何使得聚焦时光标固定显示在起点位置？
**解决措施**
1. TextInput组件绑定onEditChange事件，该事件TextInput可进行输入时触发。
2. 在事件回调用TextInputController.caretPosition方法设置光标位置，不过需要用到setTimeout延迟方法。
**代码示例**
```
@Entry
@Component
struct TextInputDemo {
controller: TextInputController = new TextInputController()
build() {
Column() {
TextInput({ controller: this.controller })
.onEditChange((isEditing: boolean) => {
if (isEditing) {
setTimeout(() => {
this.controller.caretPosition(0)
}, 100)
}
})
}
}
}
```
**参考链接**
[TextInput组件](../reference/arkui-ts/ts-basic-components-textinput.md)
## 如何获取可滚动组件的当前滚动偏移量
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
可滚动组件包含List，Grid，Scroll等，在发生滚动时如何获取滚动偏移量？
**解决措施**
1. 可滚动组件在初始化时可设置scroller参数，绑定滚动控制器。
2. 通过控制器的currentOffset方法可获取水平和竖直方向的滚动偏移量。
**参考链接**
[Scroll](../reference/arkui-ts/ts-container-scroll.md#currentoffset)
## 如何实现文本竖向排列
适用于：OpenHarmony 3.2 Beta5 API 9
**问题现象**
使用Text组件时，无法将文本排列方向设置为竖向排列。
**解决措施**
Text组件当前文本排列方向固定为横向排列，要设置为竖向排列，可将文件拆分，使用Flex容器组件装填，设置主轴方向为竖向。
**代码示例**
```
@Entry
@Component
struct Index15 {
private message: string = '本文档适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用，快速了解工程目录的主要文件，熟悉HarmonyOS应用开发流程。';
build() {
Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap }) {
ForEach(this.message.split(''), (item, index) => {
Text(item)
.fontSize(30)
.flexShrink(0)
})
}
}
}
```
## 如何将Ability的UI界面设置成透明
适用于：OpenHarmony 3.2 Beta5，API9
**问题现象**
如何设置Ability的UI界面为透明
**解决措施**
将最上层容器组件背景色设置为透明，然后通过设置XComponent组件的opacity属性值为0.01来实现。
示例：
```
build() {
Stack() {
XComponent({
id: 'componentId',
type: 'surface',
})
.width('100%')
.height('100%')
.opacity(0.01)
// 页面内容
}
.width('100%')
.height('100%')
.backgroundColor('rgba(255,255,255, 0)')
}
```
## constraintSize尺寸设置不生效
适用于：Openharmony 3.2 Beta5 API 9 stage模型
**问题现象**
constraintSize约束组件尺寸时，子组件内设置百分比宽度，例如width\('100%'\)会采用constraintSize约束中的最大宽乘百分比，导致撑开组件，看起来constraintSize设置没生效。
**解决措施**
可以在外层使用Scroll组件，设置constraintSize，当子组件占用空间超过设置的约束值时，会显示滚动条。
## 如何将背景颜色设置为透明
适用于：OpenHarmony 3.2 Beta5 API 9
**解决措施**
将backgroundColor设置为 '\#00000000'。
## Scroll组件滚动到达不了最底部
适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型
**问题现象**
Scroll组件在未设置高度情况下，默认为窗口高度，当滚动区域外存在其他组件时，滚动底部区域会出现遮挡。
**解决措施**
Scroll组件需要设置Scroll高度，或者使用Flex布局限制Scroll高度。
## backgroundImage如何设置CenterCrop
适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型
**问题现象**
CenterCrop是android中imageView,scaletype的设置，主要保证图片等比缩放裁剪，位置保持居中，要达到相同效果，应该怎么处理？
**解决措施**
可以使用通用属性backgroundImageSize\(ImageSize.cover\)和backgroundImagePosition\(Alignment.Center\)达到相同效果。
## 如何自定义Video组件控制栏样式
适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型
**解决措施**
1. 通过设置属性controls为false关闭默认控制栏。
2. 设置Video组件的controller。
3. 通过ArkTS实现自定义的控制栏，并通过VideoController控制视频播放。
**代码示例**
```
// xxx.ets
@Entry@Componentstruct VideoCreateComponent {
@State videoSrc: Resource = $rawfile('video1.mp4')
@State previewUri: Resource = $r('app.media.poster1')
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
@State isAutoPlay: boolean = false
@State showControls: boolean = true
controller: VideoController = new VideoController()
build() {
Column() {
Video({
src: this.videoSrc,
previewUri: this.previewUri,
currentProgressRate: this.curRate,
controller: this.controller
}).width('100%').height(600)
.autoPlay(this.isAutoPlay)
.controls(this.showControls)
.onStart(() => {
console.info('onStart')
})
.onPause(() => {
console.info('onPause')
})
.onFinish(() => {
console.info('onFinish')
})
.onError(() => {
console.info('onError')
})
.onPrepared((e) => {
console.info('onPrepared is ' + e.duration)
})
.onSeeking((e) => {
console.info('onSeeking is ' + e.time)
})
.onSeeked((e) => {
console.info('onSeeked is ' + e.time)
})
.onUpdate((e) => {
console.info('onUpdate is ' + e.time)
})
Row() {
Button('src').onClick(() => {
this.videoSrc = $rawfile('video2.mp4') // 切换视频源
}).margin(5)
Button('previewUri').onClick(() => {
this.previewUri = $r('app.media.poster2') // 切换视频预览海报
}).margin(5)
Button('controls').onClick(() => {
this.showControls = !this.showControls // 切换是否显示视频控制栏
}).margin(5)
}
Row() {
Button('start').onClick(() => {
this.controller.start() // 开始播放
}).margin(5)
Button('pause').onClick(() => {
this.controller.pause() // 暂停播放
}).margin(5)
Button('stop').onClick(() => {
this.controller.stop() // 结束播放
}).margin(5)
Button('setTime').onClick(() => {
this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置
}).margin(5)
}
Row() {
Button('rate 0.75').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
}).margin(5)
Button('rate 1').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
}).margin(5)
Button('rate 2').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
}).margin(5)
}
}
}}
```
**参考链接**
[Video](../reference/arkui-ts/ts-media-components-video.md#start)
## 如何设置组件不同状态下的样式
**问题现象**
对应组件的不同状态（如无状态、按下、禁用、聚焦、点击），显示不同的样式。
**解决措施**
使用多态样式，在组件的StateStyles接口中，定义组件不同状态下的样式。
**代码示例**
```
//xxx.ts
@Entry
@Component
struct StyleExample {
@State isEnable: boolean = true;
@Styles pressedStyles() {
.backgroundColor("#ED6F21")
.borderRadius(10)
.borderStyle(BorderStyle.Dashed)
.borderWidth(2)
.borderColor('#33000000')
.width(120)
.height(30)
.opacity(1)
}
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
Text("pressed")
.backgroundColor('#0A59F7')
.borderRadius(20)
.borderStyle(BorderStyle.Dotted)
.borderWidth(2)
.borderColor(Color.Red)
.width(100)
.height(25)
.opacity(1)
.fontSize(14)
.fontColor(Color.White)
.stateStyles({
pressed: this.pressedStyles
})
.margin({
bottom: 20
})
.textAlign(TextAlign.Center)
}
.width(350)
.height(300)
}
}
```
**参考链接**
[多态样式](../reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)
## Scroll内Flex加宽高与滑动冲突
适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型
**问题现象**
当在Scroll组件中添加容器组件，并设置该容器组件的尺寸时，会破坏滚动布局。
**解决措施**
Scroll组件中的容器组件不设置尺寸，大小由内容撑开。
## 父组件中如何处理子组件内点击事件
适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型
在父组件中初始化子组件时，将父组件中定义的方法，传递给子组件，在子组件中调用该方法，类似于变量传递。
**代码示例**
```
class Model {
value: string
}
@Entry
@Component
struct EntryComponent {
test() {
console.log('testTag test in my component');
}
build() {
Column() {
MyComponent({ title: { value: 'Hello World 2' }, count: 7, onClick: this.test }) //初始化时传递定义的方法
}
}
}
@Component
struct MyComponent {
@State title: Model = { value: 'Hello World' }
@State count: number = 0
onClick: any;
private toggle: string = 'Hello World'
private increaseBy: number = 1
build() {
Column() {
Text(`${this.title.value}`).fontSize(30)
Button(`Click to increase count=${this.count}`)
.margin(20)
.onClick(() => {
// 修改内部状态变量count
this.count += this.increaseBy
this.onClick.call();
})
}
}
}
```
## 如何主动拉起软键盘
适用于OpenHarmony 3.2 Beta5 API 9
**解决措施**
可以通过focusControl.requestFocus控制输入框获焦，组件获焦后会自动弹起软键盘
**参考链接**
焦点控制：[焦点控制](../reference/arkui-ts/ts-universal-attributes-focus.md)
zh-cn/application-dev/faqs/faqs-arkui-js.md 0 → 100644
浏览文件 @ b651e4dd
# ArkUI框架开发常见问题(JS)
## 用数组变量控制组件属性不生效
适用于：OpenHarmony，IDE 3.0.0.993,API 8
目前类web范式对数组中元素的修改不会被监听，因此不会触发页面刷新 ，需要产生数组对象的修改才可以触发页面刷新。所以，使用test1\(\)对修改数组的引用时，button组件会被禁用，使用test2\(\)修改数组中某个元素，对控制button组件disabled属性的数组单元赋值，button组件并不会被禁用。除了test1\(\)中对数组整体赋值，我们还可以使用修改数组的方法，如splice\(\)，也可以达到页面刷新的效果。
```
test1() {this.isDisabled = [true, true, true, true, true]; //该语句可实现对button组件的禁用
test2() {this.isDisabled[0] = true; //该语句对button组件的禁用不生效
```
## input组件是否支持设置文本居中对齐
适用于：OpenHarmony 3.2 Beta5 API 9 FA模型
**问题现象**
input组件中输入的文本如何实现文本居中对齐格式，使用text-align没有效果。
**解决措施**
input组件属于类web范式组件，不_支_持设置文本对齐方式，text-align样式只针对text组件生效。
**参考链接**
[input组件](../reference/arkui-js/js-components-basic-input.md)，[text组件](../reference/arkui-js/js-components-basic-text.md)
## 如何判断JS对象中是否存在某个值
适用于：OpenHarmony 3.2 Release API 9
**解决措施**
Object.values\(对象名\).indexOf\(想要判断的值\)，若返回-1表示不包含对应值，返回值不等于-1则表示包含。
\ No newline at end of file
zh-cn/application-dev/faqs/faqs-arkui-layout.md
浏览文件 @ b651e4dd
# ArkUI布局开发常见问题(ArkTS)
## 使用position之后height不生效
适用于 OpenHarmony 3.2 Beta5 API 9
**解决措施**
容器组件在使用position之后会脱离文本流，导致容器脱离外层容器束缚，导致height不生效，可以将外层容器换成Stack可以解决这个问题。
## Grid组件如何实现横向滚动
适用于 OpenHarmony 3.2 Beta5 API 9
将Grid组件设置当前网格布局行数rowsTemplate且不设置列数，当内容超出Grid组件宽度时，Grid可横向滚动进行内容展示。
## List组件与其他组件并列使用时，若未设置List滚动方向上的尺寸，无法拖动到底部
适用于 OpenHarmony 3.2 Beta5 API 9
给List加上layoutWeight属性，设置列表自适应占满剩余高度。原理：List属于可滚动容器组件，默认高度是占满全屏幕高度，当出现其他固定高度的组件占领了屏幕的部分高度时，需要开发人员显性的指定List组件占满剩余高度，而不是全屏幕高度。
## Tabs组件在点击Tab项时是否支持禁止切换
适用于 OpenHarmony 3.2 Release API 9
不支持。
## 如何拦截住onBackPress事件，不触发页面返回
适用于 OpenHarmony 3.2 Release API 9
在onBackPress中返回true表示页面自己处理返回逻辑，不会执行默认的返回逻辑。
可参考[自定义组件的生命周期-onBackPress](../reference/arkui-ts/ts-custom-component-lifecycle.md#onbackpress)
## List组件怎么实现分组列表的粘性标题效果
适用于 OpenHarmony 3.2 Release API 9
可以通过List组件的sticky属性配合ListItemGroup组件来实现。通过给List组件设置sticky属性为StickyStyle.Header，设置ListItemGroup中header参数对应的头部组件呈现粘性标题效果
可参考：[创建列表-添加粘性标题](../ui/arkts-layout-development-create-list.md#添加粘性标题)
zh-cn/application-dev/faqs/faqs-arkui-route-nav.md
浏览文件 @ b651e4dd
# ArkUI路由/导航开发常见问题(ArkTS)
## router中params无法正常传递class对象
适用于：OpenHarmony 3.2 Beta5 ，API 9 Stage模型
只能传递对象中的属性，无法传递对象中的方法。
## 在Stage模型下，如何通过router实现页面跳转
适用于：OpenHarmony 3.2 Beta5 ，API 9 Stage模型
1. 对于通过页面路由router实现页面跳转，首先要在main\_pages.json配置文件中将所有跳转的页面加入pages列表；
2. 页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。
**参考链接：**[页面路由](../reference/apis/js-apis-router.md)
## router通过调用push方法进堆栈的page是否会被回收
适用于：OpenHarmony 3.2 Beta5 ，API 9 Stage模型
调用push进入堆栈的page不回收，调用back方法出栈后可以被回收。
**参考链接：**[Router传递参数](../reference/apis/js-apis-router.md#routergetparams)
zh-cn/application-dev/napi/Readme-CN.md
浏览文件 @ b651e4dd
# Native API
Native API是OHOS SDK上提供的一组native开发接口与工具集合，方便开发者使用C或者C++语言实现应用的关键功能。Native API只覆盖了OHOS基础的一些底层能力，如libc，图形库，窗口系统，多媒体，压缩库等，并没有完全提供类似于JS API上的完整的OHOS 平台能力。在应用中使用Native API会编译成动态库打包到应用中。
<br/>
## Native API构成介绍
### Native API目录结构
Native API在SDK包的位置为$(SDK_ROOT)/native目录，主要有以下几个部分组成
|目录|功能说明|
|--|--|
|build|应用中编译动态库的toolchain cmake脚本；这个目录下ohos.toolchain.cmake文件定义了给OHOS交叉编译选项|
|build-tools|放置编译构建的工具，如cmake|
|docs|Native API接口参考文档，通过doxgen从头文件中提取出来|
|llvm|支持OHOS ABI的llvm交叉编译器|
|sysroot|放置编译链接的依赖文件目录，包含头文件，动态库等|
<br/>
### Native API接口
|接口分类|接口功能|引入版本|
|--|--|--|
|标准C库|以musl为基础提供的标准c库接口，当前提供了1500+的接口|8|
|标准C++库|c++运行时库libc++_shared，此库在打包的时候需要打包或者静态链接到应用中|8|
|日志|打印日志到系统的hilog接口|8|
|napi|ArkUI提供的，方便应用开发接入JS应用环境的一组类Node-API，是属于Native API的一部分|8|
|XComponent|ArkUI XComponent组件中的surface与触屏事件接口，方便开发者开发高性能图形应用|8|
|libuv|ArkUI集成的三方的异步IO库|8|
|libz|zlib库，提供基本的压缩，解压接口|8|
|Drawing|系统提供的2D图形库，可以在surface进行绘制|8|
|OpenGL|系统提供的openglv3接口|8|
|Rawfile|应用资源访问接口，可以读取应用中打包的各种资源|8|
|OpenSLES|用于2D，3D音频加速的接口库|8|
|Mindspore|AI模型接口库|9|
|包管理|包服务接口，方便查询应用包信息|8|
Native API中有一部分接口采用开源标准，详细列表见《[Native API中支持的标准库](https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/native-lib/third_party_libc/musl.md/)》《[Node_API](https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/native-lib/third_party_napi/napi.md/)》
## 使用介绍
<br/>
### 建议使用Native API的场景
主要有如下一些
1. 应用性能敏感代码，比如游戏，物理模拟等计算密集型场景
2. 需要复用已有的C或C++库
3. 需要针对CPU特性进行专项定制的库，如neon加速
<br/>
### 不建议使用Native API的场景
1. 写一个纯native的的OHOS应用
2. 希望在尽可能多的OHOS设备上保持兼容的应用
<br/>
# Native API的相关指导
- [Native API hello world]()
- 本例子引导开发者开发一个hello的Native API库，在ts界面上显示出从hello库中获取的字符串
- [Native API介绍](introduction.md)
- [Native API在应用工程中的使用指导](napi-guidelines.md)
- 介绍如何使用各种napi接口与js中的模块，接口，异步任务进行互操作
- [Drawing开发指导](drawing-guidelines.md)
- [Rawfile开发指导](rawfile-guidelines.md)
- [NativeWindow开发指导](native-window-guidelines.md)
......
zh-cn/application-dev/napi/introduction.md 0 → 100644
浏览文件 @ b651e4dd
# Native API 介绍
Native API是OHOS SDK上提供的一组native开发接口与工具集合，方便开发者使用C或者C++语言实现应用的关键功能。Native API只覆盖了OHOS基础的一些底层能力，如libc，图形库，窗口系统，多媒体，压缩库等，并没有完全提供类似于JS API上的完整的OHOS 平台能力。在应用中使用Native API会编译成动态库打包到应用中。
## Native API构成介绍
### Native API目录结构
Native API在SDK包的位置为$(SDK_ROOT)/native目录，主要有以下几个部分组成
|目录|功能说明|
|--|--|
|build|应用中编译动态库的toolchain cmake脚本；这个目录下ohos.toolchain.cmake文件定义了给OHOS交叉编译选项|
|build-tools|放置编译构建的工具，如cmake|
|docs|Native API接口参考文档，通过doxgen从头文件中提取出来|
|llvm|支持OHOS ABI的llvm交叉编译器|
|sysroot|放置编译链接的依赖文件目录，包含头文件，动态库等|
### Native API接口
|接口分类|接口功能|引入版本|
|--|--|--|
|标准C库|以musl为基础提供的标准c库接口，当前提供了1500+的接口|8|
|标准C++库|c++运行时库libc++_shared，此库在打包的时候需要打包或者静态链接到应用中|8|
|日志|打印日志到系统的hilog接口|8|
|napi|ArkUI提供的，方便应用开发接入JS应用环境的一组类Node-API，是属于Native API的一部分|8|
|XComponent|ArkUI XComponent组件中的surface与触屏事件接口，方便开发者开发高性能图形应用|8|
|libuv|ArkUI集成的三方的异步IO库|8|
|libz|zlib库，提供基本的压缩，解压接口|8|
|Drawing|系统提供的2D图形库，可以在surface进行绘制|8|
|OpenGL|系统提供的openglv3接口|8|
|Rawfile|应用资源访问接口，可以读取应用中打包的各种资源|8|
|OpenSLES|用于2D，3D音频加速的接口库|8|
|Mindspore|AI模型接口库|9|
|包管理|包服务接口，方便查询应用包信息|8|
Native API中有一部分接口采用开源标准，详细列表见《[Native API中支持的标准库](../reference/native-lib/third_party_libc/musl.md)》《[Node_API](../reference/native-lib/third_party_napi/napi.md)》
## 使用介绍
### 建议使用Native API的场景
主要有如下一些
1. 应用性能敏感代码，比如游戏，物理模拟等计算密集型场景
2. 需要复用已有的C或C++库
3. 需要针对CPU特性进行专项定制的库，如neon加速
### 不建议使用Native API的场景
1. 写一个纯native的的OHOS应用
2. 希望在尽可能多的OHOS设备上保持兼容的应用
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或