思路就是2个Scroll容器横向排列,尺寸只需要给左边,右边自适应撑满即可
这里用到了之前的页面容器,BuiPage来替代Scroll,也算验证一下多组件组合
 

import BuiPage from './BuiPage'

export interface BuiSplitScrollData{

}

@Builder function empty(){}

/**
 * 分左右2栏纵向可滚动容器
 */
@Component
export default struct BuiSplitScroll  {

  /**
   * 左侧宽度
   */
  @State left_width:number = 100;

  @BuilderParam slot_left: () => void =empty;

  @BuilderParam slot_right: () => void =empty;

  build(){
    Row(){
      Column() {
        BuiPage({
          defaultPadding:false,
          slot:()=>{
            this.slot_left()
          }
        })
      }.height('100%').width(this.left_width)
      Column() {
        BuiPage({
          defaultPadding:false,
          slot:()=>{
            this.slot_right()
          }
        })
      }.height('100%').layoutWeight(1)
    }.layoutWeight(1)
  }





}

使用方式:

import BuiSplitScroll from '../bui/BuiSplitScroll';
@Extend(Column) function columnLeft(){
  .height(60).justifyContent(FlexAlign.Center).borderWidth(1).borderColor(Color.White).width("100%")

}
@Component
export default struct BuiSplitScrollDemo {

  dataArr:Array<number>=new Array<number>(20).fill(1)

  @State rightArray:Array<number> =  new Array<number>(Math.round(Math.random()*40)+2).fill(1)


  @State currentLeft:number = 0

  build(){
    Column() {
      BuiSplitScroll({
        left_width:100,
        slot_left:()=>{
          this.slot_left()
        },
        slot_right:()=>{
          this.slot_right()
        }
      });
    }
  }


/**
 * 关于高度,参考
 * 【【ArkUI 布局】多层容器嵌套下的尺寸设定（Harmony OS、鸿蒙）】 https://www.bilibili.com/video/BV1194y1c7bb/?share_source=copy_web&vd_source=88d77167f4bbbd360ea5623bfe903c41
 */
  @Builder slot_left(){
    Column() {
      ForEach(this.dataArr,(item:number,index:number)=>{
        Column(){
          Text(`左边元素${index}`).fontColor(Color.White)
        }.columnLeft().onClick(()=>{
          this.rightArray =[]
          setTimeout(()=>{
            this.rightArray = new Array<number>(Math.round(Math.random()*40)+2).fill(1)
          },300)
          this.currentLeft = index
        }).backgroundColor(this.currentLeft==index?Color.Orange:Color.Brown)
      },(item:number,index:number)=>(item+index+""))

    }.backgroundColor(Color.White).width("100%")
  }

  @Builder slot_right(){
    ForEach(this.rightArray,(item:number,index:number)=>{
      Column(){
        if(index>=2){
          Image($r("app.media.pano_r"))
        }else{
          Image($r("app.media.demo"))
        }

        Text(`右边元素${index}`)
      }.borderWidth(1).width("100%")
    },(item:number,index:number)=>(item+index+""))
  }

}

本章代码地址: https://gitee.com/jifsu_167/open-harmony-demo