Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: replaced flex item size #1338

Merged
merged 10 commits into from
May 7, 2022
Merged

fix: replaced flex item size #1338

merged 10 commits into from
May 7, 2022

Conversation

temper357
Copy link
Contributor

@temper357 temper357 commented Apr 20, 2022

Closes #1276

@temper357 temper357 changed the title [WIP] fix: replaced flex item size fix: replaced flex item size Apr 21, 2022
metrics.mainAxisExtent = mainAxisExtent;
}
}

// Adjust flex line cross extent caused by flex item stretch due to alignment properties
// in the cross axis (align-items/align-self).
double _recomputeRunCrossExtent(_RunMetrics metrics) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_recomputeRunCrossExtent 相关的第一次 computeRunCrossExtent 在哪?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

第一次 compute 在 _computeRunMetrics 中第一次 layout child 后计算 https://github.com/openkraken/kraken/blob/fix/replaced-flex-item-size/kraken/lib/src/rendering/flex.dart#L897

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_recomputeRunCrossExtent 与 _computeRunMetrics ,看命名 CrossExtent 与 Metrics 就不是一个东西?

Copy link
Contributor Author

@temper357 temper357 Apr 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CrossExtent 指的是 flex line 纵向的 size,横向的 size 对应的是 MainExtent,RunMetrics 则包含了横向与纵向两个维度的 size。
这里 _recomputeRunCrossExtent 的作用是当 replaced element 上有 flex-grow 或 flex-shrink 且没有定义纵轴的 size 时,此时由于 aspect ratio 的存在,replaced element 的主轴 size 被拉伸会导致其纵轴 size 被重新计算,当 flexbox 在纵轴上是由 flex item 撑开时,此时 flex line 的纵轴 size 需要重新计算。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我的疑问是既然有 _recomputeRunCrossExtent 是不是会有 _computeRunCrossExtent

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不需要 _computeRunCrossExtent,原因是正常流程 run cross extent 与 main extent 是在 child layout 后根据 child 的 size 计算出来的,所以第一次 compute run metrics,只需要在 child 遍历 layout 时候做,不需要单独遍历 child 计算 _computeRunCrossExtent;当 flex-grow/flex-shrink/align-items 存在进行第二次 layout 时,理论上只需要和第一次 layout 时做相同的处理,在 child layout 时计算就好(事实上第二次 layout 时 run main extent 就是这样计算的),但是 run cross extent 的特殊点是对 replaced element 进行 flex-grow/flex-shrink 会影响 run cross extent 从而影响后面计算 align-items stretch 的 length,因此 _recomputeRunCrossExtent 可以看作是与 align-item stretch 联动产生的一个特殊逻辑需要在 layout 之前前置计算。

@yuanyan yuanyan merged commit 4197044 into main May 7, 2022
@yuanyan yuanyan deleted the fix/replaced-flex-item-size branch May 7, 2022 06:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Flex 容器中 replaced element 根据 intrinsic ratio 伸缩未考虑 flex-shrink 导致超出容器
3 participants