[Android] 0.30.2 text 组件多行下，div高度不对

[Freedomhxb]

Android端不对。还望大佬看看。 div里如果有text，并且text是多行的情况下，有可能div的最终高度不对。 哪位大佬知道div的高度的获取到的代码是从哪里开始的？

[Freedomhxb]

图片如下 https://github.com/Freedomhxb/imgs/blob/main/web.jpg https://github.com/Freedomhxb/imgs/blob/main/android.jpg

[Freedomhxb]

代码如下 https://github.com/Freedomhxb/imgs/blob/main/Test.vue

[Freedomhxb]

@Hanks10100 可以能帮忙看下吗？谢谢

[Freedomhxb]

@katherine95s 可以能帮忙看下吗？谢谢

[Hanks10100]

是不是样式的问题，去掉 的 flex: 1，设置个 height 试一下

[Freedomhxb]

是不是样式的问题，去掉 的 flex: 1，设置个 height 试一下

@Hanks10100 text的内容是变化的，所示无法设置text的高度，无法设置div的高度， flex：1去掉后显示更不对了。尝试过好多方式 ，都无法解决。

[Freedomhxb]

@Hanks10100 大佬，有其他办法吗

[Hanks10100]

看起来是右侧 div 未撑开外层 flex 容器高度的问题，如果无法写死高度的话，可以用代码取出来 div 的高度再设置给 flex 容器。

<template>
  <div>
    <div class="flex-container" :style="{ height: boxHeight }">
      <image style="width: 100px;height: 100px;background-color: #afddff"></image>
      <div style="flex: 1">
        <div ref="autoExpand">
          <div style="height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <text>{{ boxHeight }} {{ content }}</text>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const dom = weex.requireModule('dom')

  export default {
    data() {
      return {
        boxHeight: '100px',
        content: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
      }
    },

    mounted () {
      dom.getComponentRect(this.$refs.autoExpand, option => {
        console.log('div size:', option.size)
        this.boxHeight = option.size.height + 'px'
      })
    }
  }
</script>

<style scoped>
  .flex-container {
    display: flex;
    flex-direction: row;
    border-width: 1px;
    border-style: solid;
    border-color: rosybrown;
    margin-top: 20px
  }
</style>

试一下给外层 flex 容器的 height 绑定一个变量，在 flex: 1 的 div 里再套一层 <div ref="autoExpand">，然后在 mounted 生命周期里用 dom.getComponentRect() 接口取节点布局后的高度，设置给外层 flex 容器。

http://doc.weex.io/zh/docs/modules/dom.html#getcomponentrect

[Freedomhxb]

看起来是右侧 div 未撑开外层 flex 容器高度的问题，如果无法写死高度的话，可以用代码取出来 div 的高度再设置给 flex 容器。

<template>
  <div>
    <div class="flex-container" :style="{ height: boxHeight }">
      <image style="width: 100px;height: 100px;background-color: #afddff"></image>
      <div style="flex: 1">
        <div ref="autoExpand">
          <div style="height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <text>{{ boxHeight }} {{ content }}</text>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
          <div style="margin-top:10px;height: 50px;background-color: #717171;border-width: 2px;border-color: #41B883;border-style: solid"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const dom = weex.requireModule('dom')

  export default {
    data() {
      return {
        boxHeight: '100px',
        content: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
      }
    },

    mounted () {
      dom.getComponentRect(this.$refs.autoExpand, option => {
        console.log('div size:', option.size)
        this.boxHeight = option.size.height + 'px'
      })
    }
  }
</script>

<style scoped>
  .flex-container {
    display: flex;
    flex-direction: row;
    border-width: 1px;
    border-style: solid;
    border-color: rosybrown;
    margin-top: 20px
  }
</style>

试一下给外层 flex 容器的 height 绑定一个变量，在 flex: 1 的 div 里再套一层 <div ref="autoExpand">，然后在 mounted 生命周期里用 dom.getComponentRect() 接口取节点布局后的高度，设置给外层 flex 容器。

http://doc.weex.io/zh/docs/modules/dom.html#getcomponentrect

@Hanks10100 大佬，你这种方式也不行， ref="autoExpand" 这个div高度测量不对。Android端不对

[Freedomhxb]

这个bug什么时候可以修改？weex是被放弃了吗

[Freedomhxb]

救救孩子吧