Skip to content

升级yoga3(yoga2)后,scroller 在不设置size 时,两端大小表现不一致 #449

@yFeii

Description

@yFeii

描述

yoga3 ios scroller 在没有滚动轴 尺寸时,android 默认无法超出父容器,ios 为内容大小
原因为:Fix measure inner dimensions

Hummer version:

复现步骤

  1. 创建 parent view 设置 主轴交叉轴对其为 center,设置 width 300,height 100
  2. 创建scroller 不设置任何样式
  3. 给 scroller 添加 子视图,并使子视图 size 超过300
  4. 运行

ios 为 scroller 和子视图相同大小,并在 parent view 中居中显示
android 为 scroller parent view 大小一致

预期结果

和 ios 保持一致(与web一致)

样例代码、屏幕截图或者仓库链接

class RootView extends View {
constructor() {
super();
this.style = {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center'
}
this.initElement()
}

initElement(){
const view = new View()
view.style = {
justifyContent : "flex-start",
alignItems : "center",
display : "flex",
flexDirection :"column",
width : '100%',
marginTop : "15",
}
this.appendChild(view);

const scroller = new HorizontalScroller()
scroller.style = {
  flexShrink : 0,
}
for (let index = 0; index < 7; index++) {
  const item = this.createItem(index);
  scroller.appendChild(item);
}
view.appendChild(scroller)

}

createItem(message:number) : View{

const item = new View()
// item.style = {
//   width : 700,
//   height : 100,
// }
item.style = {
  height : "100%",
  display : "flex",
  marginTop : "15",
  width : 60,
  alignItems : "center",
  marginLeft : 12.5,
  flexDirection : "column",
  justifyContent : "flex-start",
  marginRight : 0
}


var text = new Text()
text.style = {
  fontSize: 20,
  height:100
}
text.text = message + ''
item.appendChild(text);
return item

}
}

// 根页面渲染
Hummer.render(new RootView());

截图:
ios
android

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions