OpenHarmony开发者论坛

标题: Scroll无法滚动的问题 [打印本页]

作者: linyu 时间: 2024-3-6 14:28
标题: Scroll无法滚动的问题
[md]问题描述：我使用List作为父组件，ListItem为子组件，Column作为孙子组件，同时Column占据的大小和ListItem一样，这个时候如果我运行程序，发现手指触摸到Column的区域将无法触发滚动效果。如果把Column的区域改的小一点，手指通过触摸ListItem的区域就可以触发滚动效果

吐槽：所有的例子都是使用Text作为孙子组件，而Text的大小又比较小，所以滚动效果好，而使用占据控件较大的Column组件则滚动效果不佳。。。
[/md]

作者: 深开鸿_王石 时间: 2024-3-7 09:21
提供个代码看看呢？

作者: linyu 时间: 2024-3-7 19:09
回复 深开鸿_王石: import { BaseNote } from '../../orm/BaseNote';
import { convert2Date } from '../../util/tool';

@Component
export struct Notes {
  @LocalStorageLink('notes')
  notes: BaseNote[] = [];

  // scroller: Scroller = new Scroller()

  aboutToAppear() {
console.log("notes size is " + this.notes.length)
  }

  build() {
Scroll() {
   // Flex({ direction: FlexDirection.Column }) {
   Column() {
      List({ space: 20 }) {
      ForEach(this.notes, (item: BaseNote) => {
         ListItem() {
            // Flex({ direction: FlexDirection.Column }) {
            Column() {
            ColumnSplit() {
               Text(item.title)
                  .maxLines(1)
                  .padding({bottom: 16, left: 16, top: 16})
                  .width('100%')
               Text(convert2Date(item.timestamp).toString())
                  .maxLines(1)
                  .padding({bottom: 16, left: 16, top: 16})
                  .width('100%')
               Text(item.body)
                  .width("100%")
                  .borderRadius(15)
                  .fontSize(16)
                  .padding({bottom: 16, left: 16, top: 16})
            }
            }
            .backgroundColor(Color.White)
         }
         .width("100%")
         .backgroundColor(Color.Blue)
      }, (item: BaseNote) => item.id.toString())
      }
      .width("100%")
      .friction(0.6)
      .borderWidth(1)
      .margin(20)
      .edgeEffect(EdgeEffect.Spring)
      .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
      })
   }
   .width('100%')
}
.edgeEffect(EdgeEffect.Spring)
.scrollBar(BarState.Off)
  }
}

作者: 深开鸿_王石 时间: 2024-3-11 09:22
标题: Scroll无法滚动的问题
[md]我改了点，给columnsplit加了背景色，如下图，红色区域滑动没反应，，白色就行，这应该是comunsplit的问题咯，查了下这个容器有以下属性，这东西在拦截滑动事件，所以目前看别用columnsplit为好，加分割弄个border就好了，或者margin加背景色，好多法子呢，

| resizeable | boolean | 分割线是否可拖拽，默认为false。 |
| ---------- | ------- | ------------------------------- |

```
         ListItem() {
            // Flex({ direction: FlexDirection.Column }) {
            Column() {
            ColumnSplit() {
               Text('T'+item)
                  .maxLines(1)
                  .padding({bottom: 16, left: 16, top: 16})
                  .width('100%')
               Text('B'+item)
                  .maxLines(1)
                  .padding({bottom: 16, left: 16, top: 16})
                  .width('100%')
               Text('E'+item)
                  .width("100%")
                  .borderRadius(15)
                  .fontSize(16)
                  .padding({bottom: 16, left: 16, top: 16})
            }
            .backgroundColor(Color.Red)
            }
            .backgroundColor(Color.White)
         }
         .width("100%")
         .backgroundColor(Color.Blue)ColumnSplit
```

![image.png](https://forums-obs.openharmony.c ... zwva63366wwsav6.png "image.png")
[/md]

作者: linyu 时间: 2024-3-11 14:55
回复 深开鸿_王石: 谢谢大佬！

我也试过染色，我还以为是Column的原因。。。还要继续修行呀

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)