HarmonyOS 鸿蒙Next：请问各位大佬arkts里的Column上用了transform属性旋转之后，只是样式转过来了，功能都还在原来的位置，怎么解决啊

HarmonyOS 鸿蒙Next：请问各位大佬arkts里的Column上用了transform属性旋转之后，只是样式转过来了，功能都还在原来的位置，怎么解决啊 通过openharmony官网里面的screen.on或getAllScreens方法获取的屏幕状态都是0，不管怎么旋转就是监听不到屏幕的状态，会监听到状态但是状态拿到的都是0。arkts里的Column上用了transform属性旋转之后，只是样式转过来了，功能都还在原来的位置，怎么解决这个问题啊，有没有大佬遇到过相似的问题？

2 回复

import http from ‘@ohos.net.http’;

import { CommonConstants } from ‘…/…/common/CommonConstants’;

import Logger from ‘…/…/common/Logger’;

import { PicData } from ‘./PicData’;

import SearchResult from ‘./Result’;

import promptAction from ‘@ohos.promptAction’

import router from ‘@ohos.router’;

import common from ‘@ohos.app.ability.common’;

import { Configuration } from ‘@ohos.app.ability.Configuration’;

import mediaquery from ‘@ohos.mediaquery’;

let dataSource = new PicData()

/**

  • 问题： 横竖屏切换，间距会发生偶发性变化
  • 解决方案：延迟300毫秒改变参数 */

@Entry @Component struct GridLayoutIndex { private context = getContext(this) as common.UIAbilityContext;

@State pageNo: number = 0 total: number = 0 @State running: boolean = true @State screenDirection: number = this.context.config.direction @State columnsTemplate: string = ‘1fr 1fr’ @State imageHeight: string = ‘20%’ scroller: Scroller = new Scroller() // 当设备横屏时条件成立 listener = mediaquery.matchMediaSync(’(orientation: landscape)’); onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { //横屏 this.screenDirection = 1 } else { //竖屏 this.screenDirection = 0 } setTimeout(() => { this.configureParamsByScreenDirection() }, 300) }

onBackPress(){ this.context.eventHub.off(‘onConfigurationUpdate’) }

aboutToAppear() { console.log(‘已进入瀑布流页面’) console.log(‘当前屏幕方向：’ + this.context.config.direction) if (AppStorage.Get(‘screenDirection’) != ‘undefined’){ this.screenDirection = AppStorage.Get(CommonConstants.ScreenDirection) } this.configureParamsByScreenDirection() this.eventHubFunc() let portraitFunc = this.onPortrait.bind(this) this.listener.on(‘change’, portraitFunc) this.requestData() }

@Builder loadDataFooter() { LoadingProgress() .width(px2vp(150)) .height(px2vp(150)) .color(Color.Orange) }

build() { Stack() { WaterFlow({ scroller: this.scroller }) { LazyForEach(dataSource, item => { FlowItem() { Column({ space: 10 }) { Image(item.coverUrl).objectFit(ImageFit.Cover) .width(‘100%’) .height(this.imageHeight) Text(item.title) .fontSize(px2fp(50)) .fontColor(Color.Black) .width(‘100%’) .onClick(() => { router.pushUrl({ url: ‘custompages/waterflow/Detail’, params: item }) }) } }, item => item) } .columnsTemplate(this.columnsTemplate) .columnsGap(5) .rowsGap(5) .onReachStart(() => { console.info(“onReachStart”) }) .onReachEnd(() => { console.info(“onReachEnd”) if (!this.running){ if ((this.pageNo + 1) * 15 < this.total){ this.pageNo++ this.running = true setTimeout(() => { this.requestData() }, 2000) } } }) .width(‘100%’) .height(‘100%’) .layoutDirection(FlexDirection.Column) if (this.running) { this.loadDataFooter() } } }

requestData() { let url = https://api.apiopen.top/api/getHaoKanVideo?page=${this.pageNo}&size=15 let httpRequest = http.createHttp() httpRequest.request( url, { header: { “User-Agent”: “Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36” } }).then((value: http.HttpResponse) => { if (value.responseCode == 200){ let searchResult: SearchResult = JSON.parse(value.result as string) if (searchResult){ this.total = searchResult.result.total searchResult.result.list.forEach(ItemModel => { dataSource.addData(ItemModel) }) } } else { console.error(JSON.stringify(value)) } }).catch(e => { Logger.d(JSON.stringify(e)) promptAction.showToast({ message: ‘网络异常:’ + JSON.stringify(e), duration: 2000 }) }).finally(() => { this.running = false }) }

eventHubFunc() { this.context.eventHub.on(‘onConfigurationUpdate’, (data) => { console.log(JSON.stringify(data)) }); }

configureParamsByScreenDirection(){ if (this.screenDirection == 0){ this.columnsTemplate = ‘1fr 1fr’ this.imageHeight = ‘20%’ } else { this.columnsTemplate = ‘1fr 1fr 1fr 1fr’ this.imageHeight = ‘50%’ } }

更多关于HarmonyOS 鸿蒙Next：请问各位大佬arkts里的Column上用了transform属性旋转之后，只是样式转过来了，功能都还在原来的位置，怎么解决啊的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用transform属性对Column进行旋转时，虽然视觉上元素发生了旋转，但元素的布局和交互逻辑仍然基于旋转前的坐标系。这是因为transform属性仅影响元素的渲染效果，而不改变其布局和交互的原始位置。

要解决这个问题，可以使用Matrix4类来手动调整元素的布局和交互逻辑。通过Matrix4，你可以对元素进行旋转、平移、缩放等操作，并且这些操作会同时影响元素的渲染和布局。具体实现时，可以在Column的onAppear或onTouch等生命周期回调中，使用Matrix4来更新元素的位置和交互逻辑。

例如，假设你需要对Column进行旋转45度，可以这样实现：

import { Matrix4 } from '@ohos.arkui';

@Entry
@Component
struct RotatedColumn {
  private matrix: Matrix4 = new Matrix4();

  build() {
    Column() {
      // 添加你的子组件
    }
    .onAppear(() => {
      this.matrix.rotateZ(45); // 旋转45度
      // 更新Column的布局和交互逻辑
    })
    .matrix(this.matrix)
  }
}
回到顶部