HarmonyOS 鸿蒙Next 子组件超过父组件宽度 最后的子组件如何使用显示

HarmonyOS 鸿蒙Next 子组件超过父组件宽度 最后的子组件如何使用显示

WX20241204-104858.png

这种效果如何实现  在头部时间和尾部其他信息显示全的情况下 

让中间的作者区域动态调整 最后一个作者信息如果显示不全 使用。。。显示 

每个作者也是一个单独的子组件


更多关于HarmonyOS 鸿蒙Next 子组件超过父组件宽度 最后的子组件如何使用显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复
scroll组件与row布局 自定义组件 组合

更多关于HarmonyOS 鸿蒙Next 子组件超过父组件宽度 最后的子组件如何使用显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主您好，可以参考如下demo，主要思路是结合Row和Scroll组件

  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  Row() {
	Row() {
	  Text('1').width(50)
	  Scroll(this.scroller) {
		Row() {
		  ForEach(this.arr, (item?:number|undefined) => {
			if(item){
			  Text(item.toString())
				.height('90%')
				.width(50)
				.backgroundColor(0xFFFFFF)
				.borderRadius(15)
				.fontSize(16)
				.textAlign(TextAlign.Center)
				.margin({ left: 10 })
			}
		  })
		}.height('100%')
	  }
	  .width('70%')
	  .backgroundColor(0xDCDCDC)
	  .scrollable(ScrollDirection.Horizontal) // 滚动方向为水平方向
	  .scrollBar(BarState.On) // 滚动条常驻显示
	  .scrollBarColor(Color.Gray) // 滚动条颜色
	  .scrollBarWidth(10) // 滚动条宽度
	  .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
	  Text('2').width(50)
	}.width('100%').margin({ top: 5 })
  }.width('100%').margin({ top: 5 }).justifyContent(FlexAlign.SpaceBetween)

现在设计的原意是： 外层Row布局的子组件从左往右依次排列显示 ， 等显示不全的时候 ，才让中间的作者显示成。。。或者允许横向滑动

可以添加enableScrollInteraction属性，参考： //Page.ets @Entry @Component struct Page { scroller: Scroller = new Scroller(); @State isDone: boolean = false private arr: number[] = [1, 2, 3, 4, 5]; // 大于4个元素可以滑动，否则不能滑动

aboutToAppear(): void { if (this.arr.length > 4) { this.isDone = true } else { this.isDone = false } }

build() { Row() { Row() { Text(‘1’).width(50) Scroll(this.scroller) { Row() { ForEach(this.arr, (item?:number|undefined) => { if(item){ Text(item.toString()) .height(500) .width(50) .backgroundColor(0xFFFFFF) .borderRadius(15) .fontSize(16) .textAlign(TextAlign.Center) .margin({ left: 10 }) } }) }.height(‘100%’) } .enableScrollInteraction(this.isDone)//设置是否支持滚动手势 .width(280) .backgroundColor(0xDCDCDC) .scrollable(ScrollDirection.Horizontal) // 滚动方向为水平方向 .scrollBar(BarState.On) // 滚动条常驻显示 .scrollBarColor(Color.Gray) // 滚动条颜色 .scrollBarWidth(10) // 滚动条宽度 .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹

    Text('2').width(50)
  }.width('100%').margin({ top: 5 })
}.width('100%').margin({ top: 5 }).justifyContent(FlexAlign.SpaceBetween)
.height('100%')
.width('100%')

} }

在HarmonyOS鸿蒙系统中，当子组件的宽度超过其父组件的宽度时，通常会导致子组件溢出父组件的边界，这在UI设计中是不希望看到的。为了确保所有子组件都能正确显示，特别是最后的子组件，可以采取以下几种处理方式：

  1. 使用滚动容器：为父组件添加一个滚动容器（如Scroll组件），允许用户通过滚动来查看超出父组件边界的子组件内容。

  2. 调整子组件宽度：根据父组件的宽度，动态调整子组件的宽度，确保子组件的总宽度不超过父组件。

  3. 使用布局算法：利用鸿蒙提供的布局算法（如Flex布局或Grid布局），自动调整子组件的大小和位置，以适应父组件的边界。

  4. 截断或隐藏：对于超出父组件边界的最后子组件部分，可以选择截断显示或添加渐变隐藏效果，以提供较好的用户体验。

  5. 设置子组件的换行：如果适用，可以设置子组件在达到一定宽度后自动换行，以充分利用父组件的垂直空间。

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

回到顶部