HarmonyOS row布局的宽度超过父布局？

Question

import { TopBar } from 'lib_common/src/main/ets/view/TopBar';

@Entry
@Component
struct BookPracticeMultiNewPage {
  @State tipsPlay: boolean = false
  build() {
    Stack() {
      TopBar()
      Column() {
        Row() {
          Text() {
            Span('1/5')
            Span('阅读理解题').margin({ left: 10 })
          }
          .backgroundColor('#F1DDB9')
          .fontSize(13)
          .fontColor('#302D33')
          .height(32)
          .borderRadius(16)
          .padding({ left: 12, right: 12 })
          .margin({right:5})

          if (this.tipsPlay) {
            ImageAnimator()
              .images([
                { src: $r('app.media.ic_exercises_record_play_one_new') },
                { src: $r('app.media.ic_exercises_record_play_two_new') },
                { src: $r('app.media.ic_exercises_record_play_three_new') }
              ])
              .duration(500)
              .state(this.tipsPlay ? AnimationStatus.Running : AnimationStatus.Stopped)
              .width(23)
              .height(18)
          } else {
            Image($r('app.media.ic_exercises_record_play_three_new')).width(23).height(18)
          }
          Blank()
          Text('查看全文')
            .width(72)
            .height(34)
            .fontSize(12)
            .fontColor(Color.White)
            .backgroundColor('#AE7A44')
            .borderRadius(32)
            .textAlign(TextAlign.Center)
            .margin({right:10})
          Row() {
            Text('自动翻页').fontSize(13).margin(3).stateStyles({
              selected: {
                .backgroundColor(Color.White)
                .borderRadius(15)
                .fontColor('FF9500')
              },
              pressed: {
                .backgroundColor(Color.White)
                .borderRadius(15)
                .fontColor('FF9500')
              },
              normal: {
                .fontColor('#ffffff')
              }
            })
            Text('手动翻页').fontSize(13).margin(3).stateStyles({
              selected: {
                .backgroundColor(Color.White)
                .borderRadius(15)
                .fontColor('FF9500')
              },
              pressed: {
                .backgroundColor(Color.White)
                .borderRadius(15)
                .fontColor('FF9500')
              },
              normal: {
                .fontColor('#ffffff')
              }
            })
          }
          .width(150)
          .height(32)
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#FF9500')
          .borderRadius(16)

        }
        .width('100%')
        .justifyContent(FlexAlign.Start)
        .alignItems(VerticalAlign.Center)
        .margin({ left: 45, top: 35 })
        .height('auto')
      }.width('96%').height('98%')
      .backgroundImage($r('app.media.bg_book_practive'))
      .backgroundImageSize(ImageSize.FILL)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#FFE9A9')
  }

  aboutToAppear(): void {

  }
}

@Extend(Text)
function selectedStyle() {
  .backgroundColor(Color.White)
  .borderRadius(15)
  .fontColor('FF9500')
}

@Extend(Text)
function normalStyle() {
  .fontColor('#ffffff')
}

可以看到我的Row布局在Colum布局里面的，Colum布局的宽度为 ‘96%’，我的Row布局的with='100%'按理说，row布局的宽度不会超过父布局呀

Answer 1

通过提供的代码，因为".margin({ left: 45, top: 35 })"这行代码，导致Row组件被挤压出去了。可以在父组件设置Padding来避免此问题。