HarmonyOS 鸿蒙Next 表格第一列左悬浮并能实现表格其他列向左滑动

HarmonyOS 鸿蒙Next 表格第一列左悬浮并能实现表格其他列向左滑动在实现表格显示数据的时候，表头是自己赋值上去的，表格内容用的是后端传过来的数据，我使用flex布局完成表格的显示，使用alignItems: ItemAlign.Stretch,完成所有单元格高度的一致，如果在不设置高度的情况下，使用层叠布局进行左悬浮会导致第一列和其他列错位。我想知道怎么实现表格第一列左悬浮并能实现表格其他列向左滑动。

nodeper 1楼•3 天前

这样，不设置固定高，表格数据从后端获取

更多关于HarmonyOS 鸿蒙Next 表格第一列左悬浮并能实现表格其他列向左滑动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 2楼•3 天前

有源码吗？

gougou168 3楼•3 天前

## 这样？

```javascript
interface OperationItem {
  name: string
  icon: Resource
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page140 {
  [@State](/user/State) message: string = 'Hello World';
  [@State](/user/State) listData: Array<OperationItem> = [
    { name: '私人FM', icon: $r('app.media.icon') },
    { name: '歌手', icon: $r('app.media.icon') },
    { name: '歌单', icon: $r('app.media.icon') },
    { name: '私人FM', icon: $r('app.media.icon') },
    { name: '歌手', icon: $r('app.media.icon') },
    { name: '歌单', icon: $r('app.media.icon') },
  ]

  build() {
    Row() {
      Text('第一列')
        .width('20%')
      Scroll() {
        Row() {
          ForEach(this.listData, (item: OperationItem) => {
            Column() {
              Image(item.icon)
                .width(48)
                .aspectRatio(1)
              Text(item.name)
                .margin({ top: 8 })
                .fontSize(16)
            }
            .justifyContent(FlexAlign.Center)
            .height(104)
            .padding({ left: 12, right: 12 })
          })
        }
        .justifyContent(FlexAlign.Start)
      }
      .align(Alignment.Start)
      .backgroundColor(Color.Pink)
      .width('80%')
      .scrollable(ScrollDirection.Horizontal)
    }
    .width('100%')
  }
}

zlyuanteng 4楼•3 天前

在HarmonyOS鸿蒙Next中，实现表格第一列左悬浮并允许其他列向左滑动，可以通过使用ListContainer和ScrollView组件结合实现。首先，使用ListContainer来展示表格数据，第一列作为固定列，其他列作为可滑动部分。通过设置ListContainer的布局属性，将第一列固定在左侧。然后，使用ScrollView包裹其他列，使其可以水平滑动。具体实现步骤如下：

布局设计：在XML布局文件中，使用ListContainer作为表格的容器，第一列使用Text组件，其他列使用ScrollView包裹HorizontalScrollView组件。
数据绑定：在代码中，通过ListContainer的ItemProvider将数据绑定到每一行。第一列的数据直接绑定到Text组件，其他列的数据绑定到HorizontalScrollView中的子组件。
滑动控制：通过ScrollView的scrollTo方法控制其他列的滑动，确保在滑动时第一列保持固定。
样式调整：通过设置ListContainer和ScrollView的样式，确保表格的视觉效果符合需求，如边框、背景色等。

示例代码片段如下：

<ListContainer
    ohos:id="$+id:table_list"
    ohos:width="match_parent"
    ohos:height="match_parent">
    <Text
        ohos:id="$+id:fixed_column"
        ohos:width="100vp"
        ohos:height="match_parent"
        ohos:text="Fixed Column"/>
    <ScrollView
        ohos:id="$+id:scrollable_columns"
        ohos:width="match_parent"
        ohos:height="match_parent">
        <HorizontalScrollView
            ohos:id="$+id:horizontal_scroll"
            ohos:width="match_parent"
            ohos:height="match_parent">
            <!-- 其他列内容 -->
        </HorizontalScrollView>
    </ScrollView>
</ListContainer>

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现表格第一列左悬浮并允许其他列向左滑动的效果。

htzhanglong 5楼•3 天前

在HarmonyOS鸿蒙Next中，实现表格第一列左悬浮且其他列可向左滑动，可以通过以下步骤：

布局设计：使用<List>或<ScrollView>作为容器，结合<Column>和<Row>布局。
第一列悬浮：将第一列单独放置在一个<Column>中，并设置position: fixed，使其固定在左侧。
其他列滑动：将其他列放置在另一个<ScrollView>中，设置horizontal属性为true，实现水平滑动。
样式调整：通过CSS调整列宽、间距等，确保布局美观。

这样，第一列将保持固定，其他列可水平滑动，提升用户体验。