文章目录一、功能概述二、官方核心 APIfocusWrapMode(mode: FocusWrapMode)枚举值官方三、完整可运行代码四、代码关键解析1. 开启多列宫格布局必须2. 开启折行走焦核心3. 子项必须可聚焦4. 列表内边距优化体验5. 子项居中对齐六、运行效果折行走焦表现总结一、功能概述折行走焦Focus Wrap Mode是 List 组件在宫格/多列布局lanes下的焦点控制能力。开启后用户按方向键焦点移动时到达行末尾会自动换行到下一行开头实现连续流畅的焦点导航这就是折行走焦。核心属性focusWrapMode作用设置列表多列布局下的焦点换行环绕规则适用场景多列列表、宫格布局、TV/盒子/车机等键盘/遥控器焦点操作支持版本API 9 / HarmonyOS 6 全兼容二、官方核心 APIfocusWrapMode(mode: FocusWrapMode)设置列表在多列布局下的焦点换行环绕策略。枚举值官方枚举值含义FocusWrapMode.AUTO系统自动判断默认FocusWrapMode.WRAP_WITH_ARROW按方向键自动折行走焦示例使用FocusWrapMode.NONE不换行到边界即停止你代码中使用的是官方推荐的折行走焦模式.focusWrapMode(FocusWrapMode.WRAP_WITH_ARROW)三、完整可运行代码Entry Component struct ListExample { State arr: number[] [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] build() { Stack({ alignContent: Alignment.TopStart }) { Column() { List({ space: 40, initialIndex: 0 }) { ForEach(this.arr, (item: number, index?: number) { ListItem() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { Text( item) .width(150) .height(93) .fontSize(30) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) .flexShrink(1) .focusable(true) .offset({ left: 5 }) } } }, (item: string, index?: number) item) } .lanes(2) .contentStartOffset(20) .contentEndOffset(20) .width(100%) .scrollBar(BarState.Off) .friction(0.6) .focusWrapMode(FocusWrapMode.WRAP_WITH_ARROW) .alignListItem(ListItemAlign.Center) .offset({ left: 20 }) }.width(90%) }.width(100%).height(100%).backgroundColor(0xDCDCDC).padding({ top: 5 }) } }运行效果如图四、代码关键解析1. 开启多列宫格布局必须.lanes(2)// 两列布局折行走焦必须在多列列表下才能体现效果。2. 开启折行走焦核心.focusWrapMode(FocusWrapMode.WRAP_WITH_ARROW)作用右移到行末尾 →自动换到下一行开头左移到行开头 →自动换到上一行末尾实现连续环绕式焦点移动3. 子项必须可聚焦.focusable(true)ListItem 子项必须开启可聚焦焦点才能移动。4. 列表内边距优化体验.contentStartOffset(20).contentEndOffset(20)设置列表内容边距让焦点移动更美观。5. 子项居中对齐.alignListItem(ListItemAlign.Center)让两列宫格居中显示布局更标准。六、运行效果折行走焦表现列表为2列宫格布局焦点右移 → 行尾自动换行到下一行开头焦点左移 → 行首自动换到上一行末尾焦点可在整个宫格内连续环绕移动不会卡住视觉居中、边距美观、交互流畅总结focusWrapMode 只对多列 Listlanes生效必须设置 item 可聚焦focusable: true遥控器/键盘操作时生效用于 TV、车机、大屏设备最优WRAP_WITH_ARROW 是官方标准折行走焦模式如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
HarmonyOS6 ArkTS List 设置折行走焦
文章目录一、功能概述二、官方核心 APIfocusWrapMode(mode: FocusWrapMode)枚举值官方三、完整可运行代码四、代码关键解析1. 开启多列宫格布局必须2. 开启折行走焦核心3. 子项必须可聚焦4. 列表内边距优化体验5. 子项居中对齐六、运行效果折行走焦表现总结一、功能概述折行走焦Focus Wrap Mode是 List 组件在宫格/多列布局lanes下的焦点控制能力。开启后用户按方向键焦点移动时到达行末尾会自动换行到下一行开头实现连续流畅的焦点导航这就是折行走焦。核心属性focusWrapMode作用设置列表多列布局下的焦点换行环绕规则适用场景多列列表、宫格布局、TV/盒子/车机等键盘/遥控器焦点操作支持版本API 9 / HarmonyOS 6 全兼容二、官方核心 APIfocusWrapMode(mode: FocusWrapMode)设置列表在多列布局下的焦点换行环绕策略。枚举值官方枚举值含义FocusWrapMode.AUTO系统自动判断默认FocusWrapMode.WRAP_WITH_ARROW按方向键自动折行走焦示例使用FocusWrapMode.NONE不换行到边界即停止你代码中使用的是官方推荐的折行走焦模式.focusWrapMode(FocusWrapMode.WRAP_WITH_ARROW)三、完整可运行代码Entry Component struct ListExample { State arr: number[] [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] build() { Stack({ alignContent: Alignment.TopStart }) { Column() { List({ space: 40, initialIndex: 0 }) { ForEach(this.arr, (item: number, index?: number) { ListItem() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { Text( item) .width(150) .height(93) .fontSize(30) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) .flexShrink(1) .focusable(true) .offset({ left: 5 }) } } }, (item: string, index?: number) item) } .lanes(2) .contentStartOffset(20) .contentEndOffset(20) .width(100%) .scrollBar(BarState.Off) .friction(0.6) .focusWrapMode(FocusWrapMode.WRAP_WITH_ARROW) .alignListItem(ListItemAlign.Center) .offset({ left: 20 }) }.width(90%) }.width(100%).height(100%).backgroundColor(0xDCDCDC).padding({ top: 5 }) } }运行效果如图四、代码关键解析1. 开启多列宫格布局必须.lanes(2)// 两列布局折行走焦必须在多列列表下才能体现效果。2. 开启折行走焦核心.focusWrapMode(FocusWrapMode.WRAP_WITH_ARROW)作用右移到行末尾 →自动换到下一行开头左移到行开头 →自动换到上一行末尾实现连续环绕式焦点移动3. 子项必须可聚焦.focusable(true)ListItem 子项必须开启可聚焦焦点才能移动。4. 列表内边距优化体验.contentStartOffset(20).contentEndOffset(20)设置列表内容边距让焦点移动更美观。5. 子项居中对齐.alignListItem(ListItemAlign.Center)让两列宫格居中显示布局更标准。六、运行效果折行走焦表现列表为2列宫格布局焦点右移 → 行尾自动换行到下一行开头焦点左移 → 行首自动换到上一行末尾焦点可在整个宫格内连续环绕移动不会卡住视觉居中、边距美观、交互流畅总结focusWrapMode 只对多列 Listlanes生效必须设置 item 可聚焦focusable: true遥控器/键盘操作时生效用于 TV、车机、大屏设备最优WRAP_WITH_ARROW 是官方标准折行走焦模式如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
