设置了margin后宽度超出屏幕？？？？

最新推荐文章于 2024-11-21 14:08:38 发布

gxh_apologize

最新推荐文章于 2024-11-21 14:08:38 发布

阅读量284

点赞数 1

分类专栏：鸿蒙文章标签：开发语言鸿蒙

本文链接：https://blog.youkuaiyun.com/GXH_APOLOGIZE/article/details/142387585

版权

鸿蒙专栏收录该内容

1 篇文章

订阅专栏

这里写自定义目录标题

  Row() {
      Text("盒子模型")// .width('100%')
        .size({ width: 'calc(100% - 20vp)' })
        .height(100)// .margin("20vp")
        .margin({
          left: "10vp",
          top: "30vp",
          right: "10vp",
          bottom: "30vp"
        })
        .padding("10vp")
        .border({ width: "10px", style: BorderStyle.Solid, color: "#0000ff" })
        .backgroundColor("#00ff00")
        .textAlign(TextAlign.Center)
        .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
          console.log('gxh', '旧的： ' + oldValue.width + ';' + oldValue.height)
          //100%  387.6923076923077
          //367.6923076923077
          console.log('gxh', '新的： ' + newValue.width + ';' + newValue.height)
        })
    }.backgroundColor("#ff0000")
    .width('100%')

    /**
     * 1、父布局 设置width('100%')，子组件设置width('100%') 并且设置margin左右边距，肯定会超出屏幕！！
     * 2、子组件不要设置margin，让父布局设置width('100%')，并且padding左右边距
     * 3、我偏要给子组件设置margin呢？？那么可以计算一下子组件的宽度  .size({ width: 'calc(100% - 20vp)' })
     *    把margin左右边距减去，不要直接用width('100%')了。但是这样会不会有性能问题？
     */