List组件实现自定义时间选择器
================

#### 问题现象

目前HarmonyOS官方提供的TextPicker组件没有横向滑动的能力，怎样实现横向滑动的时间选择器？

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c4/v3/4EU6zWyDTXawMr-uLawZLw/zh-cn_image_0000002628763170.png?HW-CC-KV=V1&HW-CC-Date=20260709T133949Z&HW-CC-Expire=86400&HW-CC-Sign=DBEDBA192D3C81C228CF15447256C616B00F00218A57A928FE98FA9B1A286374 "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c/v3/KwCOIg0sTcih3C14YNqXkA/zh-cn_image_0000002658962483.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133949Z&HW-CC-Expire=86400&HW-CC-Sign=F76D4B678D33A1499B51E52D3D785688C308BB58F49DDA76DBC61C193DE8955E "点击放大")

#### 背景知识

*   [TextPicker组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textpicker)：滑动选择文本内容的组件，但是没有横向滑动的能力，目前只支持竖向滑动。
*   [List组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list)：是官方提供的常用的滚动组件之一，其接口[listDirection](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list#listdirection)可设置List组件排列方向，其Axis参数如下：

| 
序号

 | 

名称

 | 

说明

 |
| :-- | :-- | :-- |
| 

1

 | 

Vertical

 | 

方向为纵向。

 |
| 

2

 | 

Horizontal

 | 

方向为横向。

 |

#### 解决方案

由于TextPicker组件没有横向滑动的能力，因此可以采用List滑动组件，实现横向滚动的时间选择器，采用[scrollSnapAlign](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list#scrollsnapalign10)属性使List中间项对齐，同时将中间的Item差异化处理来进行突出显示。

@Entry
@Component
struct ListCustomTimePicker {
  private arr: string\[\] \= \['5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60'\];
  @State centerIndex: number \= 0;

  build() {
    Row() {
      List() {
        ForEach(this.arr, (item: number, index: number) \=\> {
          ListItem() {
            Row() {
              Text('' \+ item)
              _  // 判断语句,当索引位置在显示的中间时，对该时间放大处理_
                .fontSize(index \=== this.centerIndex ? 30 : 18)
                .fontColor(index \=== this.centerIndex ? Color.Black : Color.Gray)
                .textAlign(TextAlign.Center);
            }
            .width('20%') _// 单行显示5个item_
            .height(50)
            .justifyContent(FlexAlign.Center);
          };
        }, (item: string) \=\> item);
      }
      .scrollSnapAlign(ScrollSnapAlign.CENTER) _// 中间项对齐_
      .listDirection(Axis.Horizontal) _// List组件设置横向滚动_
      .scrollBar(BarState.Off)
      .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) \=\> {
        _// 获取屏幕中间item的索引值_
        this.centerIndex \= centerIndex;
        console.info(\`firstIndex：${firstIndex},lastIndex：${lastIndex}\`);
      })
      .width('100%');
    }
    .width('100%')
    .height(50)
    .backgroundColor(0xDCDCDC);
  }
}