HarmonyOS鸿蒙Next中请教一下List使用为什么我无法成功拖动到底部完整显示

HarmonyOS鸿蒙Next中请教一下List使用为什么我无法成功拖动到底部完整显示

interface TitleItem {
  name: string
}

const TitleList: TitleItem[] = [
  {
    name: '参会人'
  },
  {
    name: '状态'
  },
  {
    name: '类型'
  },
  {
    name: '设备ID'
  },
  {
    name: '界面'
  },
  {
    name: '外部打开'
  }
]

interface TerminalData {
  devName: string
  memberName: string
  devId: number
  type: string
  status: number
  face: number
  flag: number
}

const TerminalList: TerminalData[] = [
  {
    devName: '设备',
    memberName: '张三',
    devId: 1,
    type: '终端设备',
    status: 0,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '李四',
    devId: 2,
    type: '终端设备',
    status: 1,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '王五',
    devId: 3,
    type: '终端设备',
    status: 1,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '赵六',
    devId: 4,
    type: '终端设备',
    status: 1,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '牛七',
    devId: 5,
    type: '终端设备',
    status: 0,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '参参会人参会人参会人参会人参会人参会人参会人参会人参会人参会人参会人参会人参会人参会人参会人参会人会人',
    devId: 6,
    type: '终端设备',
    status: 1,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '参会参会人参会人参会人参会人参会人参会人人',
    devId: 7,
    type: '终端设备',
    status: 1,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '参参会人参会人参会人参会人参会人参会人参会人参会人参会人参会人参会人会人',
    devId: 8,
    type: '终端设备',
    status: 1,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '参参会人参会人参会人会人',
    devId: 9,
    type: '话筒设备',
    status: 0,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '参会人',
    devId: 10,
    type: '投票设备',
    status: 1,
    face: 1,
    flag: 1
  },
  {
    devName: '设备',
    memberName: '参会人',
    devId: 11,
    type: '投影设备',
    status: 1,
    face: 1,
    flag: 1
  }
]

@Builder
export function TerminalBuilder() {
  TerminalLayout()
}

@ComponentV2
export struct TerminalLayout {
  contacts: Array<TerminalData> = TerminalList
  goodsNameData: Array<string> = [
    '设备01', '设备02', '设备03', '设备04', '设备05', '设备06', '设备07', '设备08', '设备09', '设备10', '设备11'
  ]
  titles: Array<TitleItem> = TitleList
  titlesScroller = new Scroller();
  verticalScroller = new Scroller();
  @Local checkALl: boolean = false

  @Builder
  messageBuilder(index: number, content: string) {
    Column() {
      Text(content)
        .fontSize('14vp')
        .width('100%')
        .height('100%')
        .textAlign(TextAlign.Center)
    }
    .height('60vp')
    .width('100vp')
    .backgroundColor(index % 2 === 0 ? '#F0F3F5' : '#FFFFFF')
  }

  @Builder
  titleBuilder() {
    Row() {
      ForEach(this.titles, (item: TitleItem, index: number) => {
        Text(item.name)
          .fontSize('16fp')
          .fontColor('#FF7F8388')
          // .width(this.fetchWeight(index))//所有标题分配100%
          .layoutWeight(this.fetchWeight(index))
          .textAlign(TextAlign.Center)
      }, (item: TitleItem) => JSON.stringify(item))
    }
    .width('100%')
    .height('34vp')
    .backgroundColor('#FFFFFF')
  }

  fetchWeight(index: number) {
    if (index == 0) {
      return 3 //'30%'
    } else if (index == 1) {
      return 1 //"10%"
    } else {
      return 1.5 //"15%"
    }
  }

  @Builder
  listItemBuilder(item: TerminalData, index: number) {
    Row() {
      Row() { //分配100%
        Text(item.memberName)
          .buildText()
          .layoutWeight(3)
        Text(item.status == 1 ? '在线' : '离线')
          .fontColor(item.status == 1 ? '#ff2cfc1a' : '#ffff5454')
          .buildText()
          .layoutWeight(1)
        Text(item.type.toString())
          .buildText()
          .layoutWeight(1.5)
        Text(item.devId.toString())
          .buildText()
          .layoutWeight(1.5)
        Text(item.face.toString())
          .buildText()
          .layoutWeight(1.5)
        Text(item.flag.toString())
          .buildText()
          .layoutWeight(1.5)
      }.width('100%')
    }
    .width('100%')
    .height('60vp')
    .backgroundColor(index % 2 === 0 ? '#F0F3F5' : '#FFFFFF')
  }

  @Builder
  listBuilder() {
    List({ scroller: this.verticalScroller }) {
      ListItemGroup({ header: this.titleBuilder() }) {
        ForEach(this.contacts, (item: TerminalData, index: number) => {
          ListItem() {
            this.listItemBuilder(item, index)
          }
        })
      }
    }.sticky(StickyStyle.Header)
    .edgeEffect(EdgeEffect.None)
    .onScrollFrameBegin((offset: number) => {
      this.titlesScroller.scrollBy(0, offset);
      return { offsetRemain: 0 };
    })
  }

  build() {
    NavDestination() {
      Column() {
        Row() {
          //左侧设备名称列表
          Column() {
            Text('设备名称')
              .fontSize('16fp')
              .fontColor('#FF7F8388')
              .height('34vp')
              .width('100vp')
              .textAlign(TextAlign.Center)

            Scroll(this.titlesScroller) {
              List() {
                ForEach(this.goodsNameData, (item: string, index: number) => {
                  ListItem() {
                    this.messageBuilder(index, item)
                  }
                })
              }
            }
            .scrollBar(BarState.Off)
            .scrollable(ScrollDirection.Vertical)
            .onDidScroll(() => {
              this.verticalScroller.scrollTo({ xOffset: 0, yOffset: this.titlesScroller.currentOffset().yOffset });
            })
          }.width('100vp')

          //右侧内容列表
          Column() {
            Scroll() {
              this.listBuilder()
            }
            .width('120%') //这里关键配置
            .scrollBar(BarState.Off)
            .scrollable(ScrollDirection.Horizontal)
          }
          .layoutWeight(1)
        }
        .width('100%')
        .layoutWeight(1)

        // 底部其它功能按钮
        Column({ space: 10 }) {
          Row({ space: 10 }) {
            Blank()
            Button('上升').borderRadius(8)
            Button('停止').borderRadius(8)
            Button('下降').borderRadius(8)
            Button('辅助签到').borderRadius(8)
            Button('终端关机').borderRadius(8)
            Button('终端重启').borderRadius(8)
            Button('软件重启').borderRadius(8)
          }.width('100%')

          Row({ space: 10 }) {
            Row() {
              Checkbox({ name: 'cb1' })
                .selectedColor(0xed6f21)
                .shape(CheckBoxShape.ROUNDED_SQUARE)
                .onChange((value: boolean) => {
                  console.info('全选:' + value)
                })
              Text('全选')
            }

            Row() {
              Checkbox({ name: 'cb2' })
                .selectedColor(0x39a2db)
                .shape(CheckBoxShape.ROUNDED_SQUARE)
                .onChange((value: boolean) => {
                  console.info('升降机:' + value)
                })
              Text('升降机')
            }

            Row() {
              Checkbox({ name: 'cb3' })
                .selectedColor(0x39a2db)
                .shape(CheckBoxShape.ROUNDED_SQUARE)
                .onChange((value: boolean) => {
                  console.info('话筒:' + value)
                })
              Text('话筒')
            }

            Blank()

            Button('外部打开文档').borderRadius(8)
            Button('网络唤醒').borderRadius(8)
            Button('角色设定').borderRadius(8)
            Button('发布机模式切换').borderRadius(8)
          }.width('100%')
        }
        .width('100%')
        .padding(10)
        .background('#ffc4e6ff')
      }
    }
    .title("终端控制")
    .mode(NavDestinationMode.STANDARD)
    .hideTitleBar(false)
    .hideToolBar(true)
    .onReady((context: NavDestinationContext) => {
      //context.pathStack;
    })
  }
}

@Extend(Text)
function buildText() {
  .fontSize('14fp')
  .textAlign(TextAlign.Center)
}

效果就是像截图一样，往下拖就到底了，设备11 只显示一半