HarmonyOS RelativeContainer组件缺陷无法实现ui效果

RelativeContainer组件缺陷无法实现ui效果

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

1、左侧占满剩余宽度:可未左侧设置layoutWeight属性;

2、B高度依赖A高度,A高度自适应:可使用onAreaChange事件动态获取A高度,然后为B设置高度;

3、indicator默认边距无法消除:目前swiper内置indicator样式有宽高,不支持修改,可通过调整组件的margin值来适应,也可以自定义indicator;

4、获取swiper组件内容的最大高度:目前没有获取swiper未展示的组件的宽高属性,无法自适应最大子组件的高度,建议设置最大高度来实现。以下是参考demo:

@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController()
  @State rightHeight: Length = 80
  @State swiperData: string[] = ['',''];
  @State currentIndex: number = 0;
  build() {
    Column() {
      Text('近期需关注')
        .textAlign(TextAlign.Start)
        .fontSize(20)
        .width('100%')
      Text('宝宝能独坐啦').margin({bottom:10})
        .textAlign(TextAlign.Start)
        .width('100%')
      Row(){
        Column(){
          Swiper(this.swiperController){
            Column(){
              Text('疫苗对比1')
                .fontSize('20')
              Text('#流感疫苗选三价还是四价?')
                .textAlign(TextAlign.Start)
                .width('100%')
            }
            Column(){
              Text('疫苗对比2')
                .fontSize('20')
              Text('#2流感疫苗选三价还是四价?流感疫苗选三价还是四价?流感疫苗选三价还是四价?2')
            }
          }
          .indicator(false)
          .onChange(index => {
            this.currentIndex = index;
          })
          // 自定义indicator
          Row({ space: 20 }) {
            ForEach(this.swiperData, (item: string, index: number) => {
              Shape() {
                Rect().width(12).height(5).radius(5).fill(index !== this.currentIndex ? Color.Black : Color.Red)
                  .fillOpacity(0.6)
              }
            })
          }
          .margin({ top: 10 })
        }
        .layoutWeight(1) //占用剩余的宽度
        .backgroundColor(Color.Green)
        .onAreaChange((newA:Area,oldA:Area)=>{
          this.rightHeight = oldA.height;
        })
        .padding(10)

        Row(){
          Column(){
            Image($r('app.media.app_icon'))
              .width(30)
              .height(30)
            Text("记头围")
          }
          Column(){
            Image($r('app.media.app_icon'))
              .width(30)
              .height(30)
            Text("记体重")
          }
          .margin({left:10})
        }
        .backgroundColor(Color.Green)
        .padding({ top: '20.00vp', right: '10.00vp', bottom: '20.00vp', left: '10.00vp' })
        .margin({left:10})
        .height(this.rightHeight)
      }
      .margin({bottom:10})
    }
    .width('100%')
    .padding(10)
    .backgroundColor(Color.Gray)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS RelativeContainer无法自适应高度
359浏览 • 1回复 待解决
HarmonyOS RelativeContainer 组件咨询
435浏览 • 1回复 待解决
基于UI Observer实现UI组件埋点
524浏览 • 1回复 待解决
RelativeContainer 组件的使用
380浏览 • 1回复 待解决
HarmonyOS CoverFlow效果自定义组件实现
290浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
1423浏览 • 1回复 待解决
如何实现组件的阴影效果
939浏览 • 1回复 待解决
RelativeContainer组件auto对齐规则
345浏览 • 1回复 待解决
MySQL的架构在AP场景的缺陷有什么?
3387浏览 • 1回复 待解决
List组件如何实现多列效果
2126浏览 • 1回复 待解决
callback无法成功更新UI
1959浏览 • 1回复 待解决