HarmonyOS list最后一个显示不出来？

Question

滚动不到最后一个ListItem，是被list上方的Text组件影响到了，该如何解决？

import promptAction from '@ohos.promptAction'
let customDialogId: number = 0
@Builder
function customDialogBuilder(arr:number[]) {
  Column() {
    Text("标题")
      .textAlign(TextAlign.Start)
      .width('100%')
      .height(56)
      .fontWeight(500)
      .fontSize(20)
    List({ space: 20, initialIndex: 0 }) {
      ForEach(arr, (item: number, index) => {
        ListItem() {
          Row() {
            Text(item.toString()).fontSize(16).fontWeight(500).layoutWeight(1)

          }
        }.height(48)
      }, (item: number) => item.toString())
    }
    .margin({ top: 16, bottom: 16 })
    .listDirection(Axis.Vertical) // 排列方向
    .divider({ strokeWidth: 1, color: 0x05000000, startMargin: 24, endMargin: 24 }) // 每行之间的分界线
    .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
  }
  .backgroundColor(0xFFFFFF)
  .padding({ left: 24, right: 24 })
  .borderRadius(24)
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State arr:number[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 20; i++) {
      this.arr.push(i)
    }
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            promptAction.openCustomDialog({
              builder: customDialogBuilder.bind(this,this.arr)
            }).then((dialogId: number) => {
              customDialogId = dialogId
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Answer 1

弹窗无法实现自适应高度。子窗口可以自适应高度，无法实现动画效果。List与其他组件同级时，会下压List，导致显示异常，需要将List组件设置layoutWeight(1)即可，自适应高度，可以参考如下demo：

// EntryAbility.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      // 给Index页面传递windowStage
      AppStorage.setOrCreate('windowStage', windowStage);

      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

// Index.ets
import { window } from '@kit.ArkUI';
import { SUB_WINDOW_NAME } from './ResizeWindowPage';

@Entry
@Component
struct Index {
  @State count: number = 1;
  @State windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;

  build() {
    Column() {
      Button("子窗口弹窗")
        .margin({ top: 20 })
        .onClick(() => {
          this.windowStage.createSubWindow(SUB_WINDOW_NAME, (err, windowClass) => {
            if (err.code > 0) {
              console.error(`failed to create subWindow Cause: ${err.message}`);
              return;
            }
            try {
              // 设置子窗口加载页
              windowClass.setUIContent('pages/ResizeWindowPage', () => {
                windowClass.setWindowBackgroundColor('#00000000');
              });
              // 设置子窗口左上角坐标
              windowClass.moveWindowTo(0, 200);
              // 展示子窗口
              windowClass.showWindow();
              // 设置子窗口全屏化布局不避让安全区
              windowClass.setWindowLayoutFullScreen(true);
            } catch (err) {
              console.error(`failed to create subWindow Cause:${err}`);
            }
          })
        })
    }
  }
}

// ResizeWindowPage.ets
import { window } from '@kit.ArkUI'

export const SUB_WINDOW_NAME = "ResizeWindowPage"
const RESIZE_WINDOW_ROOT_ID = "RESIZE_WINDOW_ROOT_ID"

@Entry
@Component
struct CustomDialogUser {
  @State windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
  @State arr: number[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 20; i++) {
      this.arr.push(i)
    }
  }

  build() {
    Flex() {
      Column() {
        Text("标题")
          .textAlign(TextAlign.Start)
          .width('100%')
          .height(56)
          .fontWeight(500)
          .fontSize(20)
          .backgroundColor(Color.Brown)
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.arr, (item: number, index) => {
            ListItem() {
              Text(item.toString())
                .fontSize(16)
                .fontWeight(500)
                .width('100%')
                .height(48)
            }
            .backgroundColor(Color.Gray)
          }, (item: number) => item.toString())
        }
        // 设置list组件在整个屏幕中的最大占比
        .constraintSize({maxHeight: '60%' })
        .backgroundColor(Color.Pink)
        .margin({ top: 16, bottom: 16 })
        .listDirection(Axis.Vertical) // 排列方向
        .divider({
          strokeWidth: 1,
          color: 0x05000000,
          startMargin: 24,
          endMargin: 24
        }) // 每行之间的分界线
        .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
        .id(RESIZE_WINDOW_ROOT_ID)

        Button("关闭窗口").onClick(() => {
          if (window.findWindow('ResizeWindowPage').isWindowShowing()) {
            window.findWindow('ResizeWindowPage').destroyWindow();
          }
        })
      }
      // 设置整个 column 组件在整个屏幕中的最大占比
      .constraintSize({ maxHeight: "80%" })
      .layoutWeight(1)
      .backgroundColor(Color.Green)
      .padding({ left: 24, right: 24 })
      .borderRadius(24)
    }
    .backgroundColor(Color.Orange)
  }
}