HarmonyOS Scroll中嵌套Grid组件的时候,Grid必须要设置height高度吗

Scroll中嵌套Grid组件的时候,Grid必须要设置height高度吗

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

Grid的宽高没有设置时,默认适应父组件尺寸。 将 代码中Grid的父组件(Column)的宽高设置下比如: .width(“100%”) .height(“100%”)我这边是可以正常显示出来的。

参考demo:

@Entry
@Component
export struct AllChannelsPage{

  @State tabs: Array<String> = new Array();

  @State dragChannel: string = 'drag';

  private deviceWidth: number = (AppStorage.get('deviceWidth') as number)
  @State itemWidth: number = 80;
  @State itemHeight: number = 80;
  @State mineRowCount: number = 1;
  @State mineGridHeight: number = 100;
  @State mainTitieDes: string = '点击进入频道';

  aboutToAppear(): void {
    for(let i = 0; i < 30; i++ ){
      this.tabs.push('频道' + i);
    }
    this.itemWidth = (this.deviceWidth - 32 - 30)/4;
    this.itemHeight = this.itemWidth / 2.1;
    this.mineRowCount = Math.ceil(this.tabs.length / 4);
    this.mineGridHeight = this.mineRowCount * this.itemHeight + (this.mineRowCount - 1) * 10
  }

  @Builder pixelMapBuilder() { //拖拽过程样式
    Column() {
      Text(this.dragChannel)
        .fontSize('15fp')
          // .fontColor($r('app.color.color202022'))
        .textAlign(TextAlign.Center)
        .width(this.itemWidth)
        .height(this.itemHeight)
          // .backgroundColor($r('app.color.colorF9F9F9'))
        .borderRadius(4)
    }
  }

  changeIndex(index1: number, index2: number) { //交换数组位置
    let temp = this.tabs[index1];
    this.tabs[index1] = this.tabs[index2];
    this.tabs[index2] = temp;
  }

  build() {
    NavDestination(){
      Column(){
        Scroll(){
          Column(){
            Row(){
              Text().width(4).height(16)
                // .backgroundColor($r('app.color.colorF21333'))
                .borderRadius(2)
              Blank().width(6)
              Text('我的频道').fontSize('16fp')
              // .fontColor($r('app.color.color202022'))
              Blank().width(8)
              Text(this.mainTitieDes).fontSize('12fp')
              // .fontColor($r('app.color.colorB1B1BB'))
              Blank().layoutWeight(1)
              Text('重置').fontSize('15fp')
              // .fontColor($r('app.color.color909099'))
              Text().width(1).height(10)
                // .backgroundColor($r('app.color.color909099'))
                .margin({left: 4, right: 4})
              Text('编辑').fontSize('15fp')
              // .fontColor($r('app.color.colorF21333'))
            }.width('100%')
            .margin({top: 5, bottom: 15})
            .padding({ left: 16, right: 16 })

            Grid() {
              ForEach(this.tabs, (channel: string) => {
                GridItem() {
                  Text(channel)
                    .fontSize((channel?? '').length > 5 ? '11fp': '15fp')
                      // .fontColor($r('app.color.color202022'))
                    .textAlign(TextAlign.Center)
                      // .width(this.itemWidth)
                      // .height(this.itemHeight)
                    .width('100%')
                    .height(80)
                      // .backgroundColor($r('app.color.colorF9F9F9'))
                    .borderRadius(4)
                  // .onTouch((event: TouchEvent) => {
                  //   if (event.type === TouchType.Up) {
                  //     this.dragChannel = channel.channelName ?? '';
                  //   }
                  // })
                }
              })
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
            .onScrollIndex((first: number) => {
              console.info(first.toString());
            })
            // .width('100%')
            // .height('80%')
            .padding({ left: 16, right: 16 })
            .supportAnimation(true)
            .editMode(true) //设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部GridItem
            .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时,触发回调。
              return this.pixelMapBuilder(); //设置拖拽过程中显示的图片。
            })
            .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。
              console.info('tag' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置,insertIndex拖拽插入位置
              this.changeIndex(itemIndex, insertIndex)
            })
            .nestedScroll({
              scrollForward: NestedScrollMode.PARENT_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })

            Text().width('100%').height(500)
          }
          .width("100%")
          .height("100%")
        }
        .width('100%')
        .layoutWeight(1)

      }

    }.hideTitleBar(true)
  }

}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS List组件不能嵌套Grid组件
48浏览 • 1回复 待解决
HarmonyOS Tabs嵌套Grid问题
51浏览 • 1回复 待解决
Grid嵌套滚动问题有知道
2659浏览 • 1回复 待解决
Grid组件如何实现高度自适应
3261浏览 • 1回复 待解决
HarmonyOS Grid高度根据内容自适应
55浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
536浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
347浏览 • 1回复 待解决
HarmonyOS scroll高度设置问题
974浏览 • 1回复 待解决
HarmonyOS Grid高度无法等分(横3竖2)
346浏览 • 1回复 待解决
HarmonyOS 可移动GridItemGrid组件
285浏览 • 1回复 待解决
资源引用都必须要通过$r形式
311浏览 • 0回复 待解决
嵌套组件Scroll不生效
2164浏览 • 1回复 待解决
HarmonyOS Grid如何设置分割线
25浏览 • 1回复 待解决