创建动态大小的 Flex 列表组件
我知道有很多关于 Flex 组件的动态大小的问题，但这个问题非常具体，其他答案并没有太多帮助。简而言之，我需要一个可以调整大小以完全适合其内容的列表，除非该高度超过其（动态大小的）父容器。我的要求如下：
- 该组件扩展List，或者至少行为类似。
variableRowHeight和wordWrap都等于true。- 列表的高度不能小于
minHeight（滚动条箭头大约为 32px）。 - 列表的高度不能大于父容器的高度。
- 请注意，父容器可以动态调整大小。
- 列表的高度应随着内容和父容器的大小变化而更新。
- 实时更新会更好，但不是必需的。
- 如果内容高度小于父容器高度，则不应有滚动条（听起来很明显，但我也遇到了麻烦）。
问题在于，使用 variableRowHeight 和 wordWrap 时，很难知道任何给定时间内容的大小。如果父容器的宽度减小，列表中可能会出现换行，从而改变内容的高度。我知道我可以使用 measureHeightOfItems() + viewMetrics.top + viewMetrics.bottom 测量列表内容的高度，但是我什么时候应该计算它？我应该监听哪些事件？我遇到的最麻烦的事情是 - 我应该什么时候计算它以最初设置大小（即，就在内容完成填充时）？
我已经断断续续地解决这个问题几个月了，但永远找不到解决方案（尽管我已经接近了不同程度的难以理解的代码块）。我并不是要求某人为我创建一个完整的组件，我只是希望有人有正确的指示让我知道应该如何确定和更新大小。我很高兴为您完成所有原型设计并讨论结果:)。
I know there are a lot of questions about dynamic sizes for Flex components, but this one is quite specific and the other answers aren't a whole lot of help. Briefly, I need a List that resizes to exactly fit its content, unless that height exceeds its (dynamically sized) parent container. My requirements are as follows:
- The component extends List, or at least acts similarly.
variableRowHeightandwordWrapboth equal totrue.- The height of the list cannot be less than
minHeight(roughly 32px for scrollbar arrows). - The height of the list cannot be greater than the height of the parent container .
- Note that the parent container can be resized dynamically.
- The height of the list should be updated as the size of both the contents and parent container changes.
- Live updating would be preferable but not necessary.
- There should be no scrollbars if the content height is less than the parent container height (sounds obvious, but I've had trouble with this too).
The trouble is that with variableRowHeight and wordWrap, it's very hard to know the size of the content at any given time. If the parent container's width is reduced, a line wrap may occur in the list which will change the height of the content. I know I can measure the height of the list content using measureHeightOfItems() + viewMetrics.top + viewMetrics.bottom, but when should I calculate that? What events should I listen for? And the thing I've had the most trouble with - when should I calculate it to set the size initially (i.e. just as the content has finished populating)?
I've been tackling this for months now on and off, but can never find a solution (though I've come close with chunks of code of varying degrees of incomprehensibility). I'm not asking for someone to create a full component for me, I'm just hoping someone has the right pointers to let me know how I should go about determining and updating the size. I'm happy to do all the prototyping for you and discuss the results :).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
自定义 Flex 组件绝对是它们自己的野兽。您花费了几个月的时间来制作一件作品，付出了巨大的奉献！
如果您还没有看过，您当然应该看看 Flex 组件生命周期。这将回答您有关在哪里执行代码的问题。我相信
measure()和commitProperties()对于您的组件来说非常重要。我还发现在管理具有动态大小的子级和/或父级的组件时，validateNow() 是一个非常有用的函数。我还没有弄清楚什么时候调用这个函数的最佳时间，但在计算 Flex 组件的大小时似乎有必要。 judah 的博客上有一篇关于它的信息丰富的文章。
祝你好运！
更新——我在 DevelopmentArc 偶然发现了一篇关于 Flex 组件生命周期的看似很棒的文章，我正在添加到我自己的阅读列表中。
Custom Flex components are definitely their own beast. You have a lot of dedication to spend months working on one!
If you haven't seen it already, you should certainly take a look at the Flex Component Lifecycle. This will answer your questions about where to execute code. I believe that
measure()andcommitProperties()are going to be important for your component.I also find
validateNow()to be a very useful function when managing components with dynamically sized children and/or parents. I have not yet figured out when the optimal times to call this function are but it seems to be necessary when calculating sizes of Flex components. There's an informative article about it at judah's blog.Best of luck!
Update -- I stumbled upon a seemingly great article about Flex component lifecycle at DevelopmentArc that I'm adding to my own reading list.