HarmonyOS 鸿蒙Next Scroll组件设置ScrollDirection.None，如何让内容不居中

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Scroll组件设置ScrollDirection.None，如何让内容不居中

我给Scroll设置了
.scrollable(isNone ? ScrollDirection.None : ScrollDirection.Vertical）
设置之后scroll内容显示了最中间的部分，怎么才能保持原有的位置不变呢

@Entry
@Component
struct Index {
windowName: string = ''
alignContent?: Alignment;

private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical })
readonly ANIMATION_DUR = 1150 //定位动画时长
readonly CLOSE_DELAY_TIME = this.ANIMATION_DUR + 50 //关闭延迟
readonly CLOSE_SPEED = 4000 //关闭速度阈值
readonly CLOSE_DIS = 200 //关闭距离阈值

@State offsetX: number = 0
@State @Watch('updateWH') offsetY: number = 0
@State positionX: number = 0
@State positionY: number = 0
@State pageBgColor: string = '#000000'
@Prop index: number = 0

@State mWidth: Length = '100%'
@State mHeight: Length = '100%'
@State xDis: number = 0

@BuilderParam childLayout?: () => void

scrollViewOffsetY: number = 0
speed: number = 0

build() {
Stack({alignContent: Alignment.TopStart}) {
Scroll() {
this.imageView()
}
.onScroll((xOffset: number, yOffSet: number) => {
this.scrollViewOffsetY += yOffSet
})
.width(this.mWidth)
.height(this.mHeight)
.scrollBar(BarState.Off)
.scrollable(this.offsetY > 0 ? ScrollDirection.None : ScrollDirection.Vertical) //当整体开始移动时关闭scroll的可滚动
.translate({ x: this.offsetX + this.xDis, y: this.offsetY, z: 0 })
.parallelGesture(
SwipeGesture({ direction: SwipeDirection.Vertical })
.onAction((event: GestureEvent) => {
this.speed = event.speed
console.log("WYBFGH", 'speed = ' + this.speed)
})
)
.parallelGesture(
PanGesture(this.panOption)
.onActionStart((event?: GestureEvent) => {
console.info('Pan start')
})
.onActionUpdate((event?: GestureEvent) => {
//当scroll已经拖动到顶部，仍然继续向下拖动
if (event && this.offsetY >= 0 && this.scrollViewOffsetY <= 3) {
this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY
console.log("WYBDrag", "offsetX = " + this.offsetX + " offsetY = " + this.offsetY)
}
})
.onActionEnd(() => {
this.positionX = this.offsetX
this.positionY = this.offsetY
console.info('Pan end')
if (this.offsetY > this.CLOSE_DIS || (this.speed > this.CLOSE_SPEED && this.offsetY > 0 && this.scrollViewOffsetY <= 3)) {
//关闭页面
this.xDis = 0
this.offsetX = 0
this.offsetY = 0
this.positionX = 0
this.positionY = 0
} else {
this.xDis = 0
this.offsetX = 0
this.offsetY = 0
this.positionX = 0
this.positionY = 0
}
this.speed = 0
}),GestureMask.Normal)
}
.width('100%')
.height('100%')
.backgroundColor(this.pageBgColor)
}

updateWH() {
this.mWidth = `calc(100% * ${this.getDragCloseScale()})`
this.mHeight = `calc(100% * ${this.getDragCloseScale()})`
console.log("WYBASD", this.mWidth)
}

@Builder
imageView() {
Stack() {
//原图
Image('http://bd-tbfile.izuiyou.com/img/view/id/2436651686/sz/src')
.width('100%')
.height('700%')
.objectFit(ImageFit.Contain)
.onError((error) => {
console.log("MediaDetailPage", "image error = " + error.message)
})
}.backgroundColor(Color.Red)
}

getDragCloseScale() {
//每移动10 大小缩小1%
let t = this.offsetY / 10
let percent = 1 - (t / 100)
return percent
}
}
Harmonyos Next教程
3 回复
这样应该可以： 
[@Entry](/user/Entry)  
[@Component](/user/Component)  
struct Index {  
  windowName: string = ''  
  alignContent?: Alignment;  

private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical })

readonly ANIMATION_DUR = 1150

readonly CLOSE_DELAY_TIME = this.ANIMATION_DUR + 50

readonly CLOSE_SPEED = 4000

readonly CLOSE_DIS = 200


@State offsetX: number = 0

@State @Watch(‘updateWH’) offsetY: number = 0

@State positionX: number = 0

@State positionY: number = 0

@State pageBgColor: string = ‘#000000’

@Prop index: number = 0


@State mWidth: Length = ‘100%’

@State mHeight: Length = ‘100%’

@State xDis: number = 0


@BuilderParam childLayout?: () => void


scrollViewOffsetY: number = 0

speed: number = 0


// 新增控制滚动状态的变量  
@State isScrollEnabled: boolean = true


build() {

Stack({alignContent: Alignment.TopStart}) {

Scroll() {

this.imageView()

}

.onScroll((xOffset: number, yOffSet: number) => {

this.scrollViewOffsetY += yOffSet

})

.width(this.mWidth)

.height(this.mHeight)

.scrollBar(BarState.Off)

// 使用isScrollEnabled控制滚动  
.scrollable(this.isScrollEnabled ? ScrollDirection.Vertical : ScrollDirection.None)

.translate({ x: this.offsetX + this.xDis, y: this.offsetY, z: 0 })

.parallelGesture(

SwipeGesture({ direction: SwipeDirection.Vertical })

.onAction((event: GestureEvent) => {

this.speed = event.speed

console.log(“WYBFGH”, 'speed = ’ + this.speed)

})

)

.parallelGesture(

PanGesture(this.panOption)

.onActionStart((event?: GestureEvent) => {

console.info(‘Pan start’)

})

.onActionUpdate((event?: GestureEvent) => {

// 当scroll已经拖动到顶部，仍然继续向下拖动  
if (event && this.offsetY >= 0 && this.scrollViewOffsetY <= 3) {

this.offsetX = this.positionX + event.offsetX

this.offsetY = this.positionY + event.offsetY


        <span class="hljs-comment">// 当开始向下拖动时，禁用滚动  </span>
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.offsetY &gt; <span class="hljs-number">0</span>) {  
          <span class="hljs-keyword">this</span>.isScrollEnabled = <span class="hljs-literal">false</span>  
        }  
        
        console.log(<span class="hljs-string">"WYBDrag"</span>, <span class="hljs-string">"offsetX = "</span> + <span class="hljs-keyword">this</span>.offsetX + <span class="hljs-string">" offsetY = "</span> + <span class="hljs-keyword">this</span>.offsetY)  
      }  
    })  
    .onActionEnd(() =&gt; {  
      <span class="hljs-comment">// 恢复滚动状态  </span>
      <span class="hljs-keyword">this</span>.isScrollEnabled = <span class="hljs-literal">true</span>  
      
      <span class="hljs-keyword">this</span>.positionX = <span class="hljs-keyword">this</span>.offsetX  
      <span class="hljs-keyword">this</span>.positionY = <span class="hljs-keyword">this</span>.offsetY  
      console.info(<span class="hljs-string">'Pan end'</span>)  
      
      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.offsetY &gt; <span class="hljs-keyword">this</span>.CLOSE_DIS || (<span class="hljs-keyword">this</span>.speed &gt; <span class="hljs-keyword">this</span>.CLOSE_SPEED &amp;&amp; <span class="hljs-keyword">this</span>.offsetY &gt; <span class="hljs-number">0</span> &amp;&amp; <span class="hljs-keyword">this</span>.scrollViewOffsetY &lt;= <span class="hljs-number">3</span>)) {  
        <span class="hljs-comment">// 关闭页面  </span>
        <span class="hljs-keyword">this</span>.xDis = <span class="hljs-number">0</span>  
        <span class="hljs-keyword">this</span>.offsetX = <span class="hljs-number">0</span>  
        <span class="hljs-keyword">this</span>.offsetY = <span class="hljs-number">0</span>  
        <span class="hljs-keyword">this</span>.positionX = <span class="hljs-number">0</span>  
        <span class="hljs-keyword">this</span>.positionY = <span class="hljs-number">0</span>  
      } <span class="hljs-keyword">else</span> {  
        <span class="hljs-keyword">this</span>.xDis = <span class="hljs-number">0</span>  
        <span class="hljs-keyword">this</span>.offsetX = <span class="hljs-number">0</span>  
        <span class="hljs-keyword">this</span>.offsetY = <span class="hljs-number">0</span>  
        <span class="hljs-keyword">this</span>.positionX = <span class="hljs-number">0</span>  
        <span class="hljs-keyword">this</span>.positionY = <span class="hljs-number">0</span>  
      }  
      <span class="hljs-keyword">this</span>.speed = <span class="hljs-number">0</span>  
    }),  
    GestureMask.Normal  
  )  
}  
.width(<span class="hljs-string">'100%'</span>)  
.height(<span class="hljs-string">'100%'</span>)  
.backgroundColor(<span class="hljs-keyword">this</span>.pageBgColor)  

}


updateWH() {

this.mWidth = calc(<span class="hljs-number">100</span>% * ${<span class="hljs-keyword">this</span>.getDragCloseScale()})

this.mHeight = calc(<span class="hljs-number">100</span>% * ${<span class="hljs-keyword">this</span>.getDragCloseScale()})

console.log(“WYBASD”, this.mWidth)

}


@Builder

imageView() {

Stack() {

// 原图  
Image(‘http://bd-tbfile.izuiyou.com/img/view/id/2436651686/sz/src’)

.width(‘100%’)

.height(‘700%’)

.objectFit(ImageFit.Contain)

.onError((error) => {

console.log(“MediaDetailPage”, "image error = " + error.message)

})

}.backgroundColor(Color.Red)

}


getDragCloseScale() {

// 每移动10 大小缩小1%  
let t = this.offsetY / 10

let percent = 1 - (t / 100)

return percent

}

}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

这部分代码逻辑写的有问题： 
.onActionUpdate((event?: GestureEvent) => {
            //当scroll已经拖动到顶部，仍然继续向下拖动
            if (event && this.offsetY >= 0 && this.scrollViewOffsetY <= 3) {
              this.offsetX = this.positionX + event.offsetX
              this.offsetY = this.positionY + event.offsetY
              console.log("WYBDrag", "offsetX = " + this.offsetX + " offsetY = " + this.offsetY)
            }
          })<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

当在最顶部的时候向下拖动 this.offsetY >= 0这里仍然触发了，然后 this.offsetY依然修改了，getDragCloseScale（）也跟着触发了，你可以把>=变成>
看一下修改的地方

  imageView() {
    Stack() {
      //原图
      Image('http://bd-tbfile.izuiyou.com/img/view/id/2436651686/sz/src')
        .width('100%')
        .height('700%')
        .objectFit(ImageFit.Contain)
        .onError((error) => {
          console.log("MediaDetailPage", "image error = " + error.message)
        })
    }.backgroundColor(Color.Red)
    .alignContent(Alignment.TopStart)<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

在HarmonyOS鸿蒙系统中，Next Scroll组件的ScrollDirection.None意味着该组件不进行滚动操作。通常，当Scroll组件的滚动方向被设置为None时，内容布局会依据其容器或父组件的默认对齐方式来决定。如果内容看起来居中，这可能是由于父组件或容器的默认对齐属性造成的。

要让内容不居中，可以尝试以下方法：

  1. 修改父组件的对齐属性：检查Scroll组件的父组件（如DirectionalLayout、StackLayout等），确保它们的对齐属性（如horizontal_align、vertical_align）不是设置为center。根据需求，可以调整为left、right、top或bottom等。

  2. 使用绝对布局：如果父组件的对齐属性调整无法满足需求，可以考虑使用AbsoluteLayout，通过指定子组件的绝对位置来控制内容的布局。

  3. 检查子组件的自身属性：确保Scroll组件内的子组件没有设置居中对齐的属性。

  4. 自定义布局：如果以上方法均不能满足需求，可能需要自定义布局逻辑，通过编程方式控制内容的布局位置。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部