apache / incubator-weex

Apache Weex (Incubating)
https://weex.apache.org
Apache License 2.0
13.74k stars 1.81k forks source link

[Android] 设置parent(垂直布局)属性flex:1时,child就显示不全了 #2619

Open fsxiaoke opened 5 years ago

fsxiaoke commented 5 years ago

现象: left里的5个文本控件展示不全 如果把left设为定宽就没问题了

weex sdk:0.24.0 code:

<template>
  <div class="wrapper">
    <div class="panel">
      <div class="left">
        <text>wo我shi我是sldk我是时来得快fawo我shi我是sldk我是时来得快fawo我shi</text>
        <text>wo我shi我是sldk我是时来得快fawo我shi我是sldk我是时来得快fawo我shi</text>
        <text>wo我shi我是sldk我是时来得快fawo我shi我是sldk我是时来得快fawo我shi</text>
        <text>wo我shi我是sldk我是时来得快fawo我shi我是sldk我是时来得快fawo我shi</text>
        <text>wo我shi我是sldk我是时来得快fawo我shi我是sldk我是时来得快fawo我shi</text>
      </div>

      <div class="right">
        <text>wo我shi我是sldk</text>

      </div>
    </div>
    <div class="panel">
      <text class="text">{{content}}</text>
    </div>
  </div>
</template>

<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .left {
    flex:1;
  }
  .right {
    justify-content: center;
  }
  .panel {
    width: 600px;
    margin-left: 75px;
    border-width: 2px;
    border-style: solid;
    border-color: #BBB;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
    flex-direction:row;
  }
  .text {
    lines:3;
    color: #666666;
    font-size: 32px;
  }
</style>

<script>
  module.exports = {
    data: function(){
      return {
        content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. "
      }
    }
  }
  </script>

下边的逻辑是不是写反了? direction为column时宽采用最宽的child,高是child的总和

inline void setMeasuredDimensionForFlex(
        const float width, const MeasureMode widthMeasureMode,
        const float height, const MeasureMode heightMeasureMode){
      float actualWidth, actualHeight;
      if (isMainAxisHorizontal(this)) {
        actualWidth = widthMeasureMode == kExactly ? width : getLargestMainSize();
        actualHeight = heightMeasureMode == kExactly ? height : getSumOfCrossSize();
      } else {
        actualHeight = heightMeasureMode == kExactly ? height : getLargestMainSize();
        actualWidth = widthMeasureMode == kExactly ? width : firstLineCrossSize();
      }
      setMeasuredDimension(actualWidth, actualHeight);
    }
YorkShen commented 5 years ago

感谢你的反馈,Weex目前是隶属于Apache Software Foundation的项目,因此在Gtihub渠道我们鼓励使用英文反馈问题。下面我将使用Google Trasnlate将你的问题翻译成英语,并以英语回答。

Question Description: [Android] When the parent (vertical layout) property flex:1 is set, the child is not displayed.

This is a bug, of course. But it may take a really long time to fix as many UI behaviour relies on the layout code. I am glad if you can give us a PR.

I will briefly explain the layout algorithm and the reason of the bug below. There are two computing phase during Weex Layout.

During phase 1, the width of the text or its parent is unknown, the layout algorithm has no way but assumes it is unlimited, e.g. a single line text.

During phase 2, the width and height of the text is correct, but the height of text's parent is still wrong.

You got what you see.