具有使用自动布局的动态宽度项目的 NSCollectionView答案

【问题标题】：NSCollectionView with Dynamic Width Items Using Auto Layout具有使用自动布局的动态宽度项目的 NSCollectionView
【发布时间】：2020-12-30 06:54:02
【问题描述】：

我正在构建一个NSCollectionView，它可以水平滚动显示如下所示的项目：

我的NSCollectionView 项目在具有自动布局约束的 .xib 中定义。项目的宽度由标签的宽度加上计数标签（及其周围的药丸）的宽度定义。所有这些都被一个名为“Box”的NSView 封装。

以下是 Box 的约束：

我的数据源已连接，一切似乎都很好，只是我无法根据其中的视图大小更改项目的宽度。

根据我的阅读，我不能仅仅依靠自动布局来定义这里的大小（我希望我错了），就像我在NSTableView 中使用动态高度一样。所以我试图用NSCollectionViewDelegateFlowLayout的sizeForItemAt委托方法计算大小：

func collectionView(_ collectionView: NSCollectionView, layout collectionViewLayout: NSCollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> NSSize {
  let item = collectionView.makeItem(withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "PhaseItem"), for: indexPath) as! PhaseItem
    
  return item.box.fittingSize
}

当我将fittingSize 打印到控制台时，它看起来是正确的。但是我得到了一个与 Box 大小相关的Unable to simultaneously satisfy constraints 崩溃（它有一个RoundedWrap 的子类）：

"<NSLayoutConstraint:0x6000033c3890 H:|-(11)-[NSTextField:0x7ff6abf6e9f0]   (active, names: '|':Avid.RoundedWrap:0x7ff6abf74840 )>",
"<NSLayoutConstraint:0x6000033c6300 H:[NSTextField:0x7ff6abf6e9f0]-(7)-[Avid.BadgeView:0x7ff6abf6f120]   (active)>",
"<NSLayoutConstraint:0x6000033c5400 H:[Avid.BadgeView:0x7ff6abf6f120]-(9)-|   (active, names: '|':Avid.RoundedWrap:0x7ff6abf74840 )>",
"<NSLayoutConstraint:0x6000033c39d0 H:|-(8)-[NSTextField:0x7ff6abf6f360]   (active, names: '|':Avid.BadgeView:0x7ff6abf6f120 )>",
"<NSLayoutConstraint:0x6000033c2760 H:[NSTextField:0x7ff6abf6f360]-(8)-|   (active, names: '|':Avid.BadgeView:0x7ff6abf6f120 )>",
"<NSLayoutConstraint:0x6000033c3a20 H:|-(0)-[Avid.RoundedWrap:0x7ff6abf74840]   (active, names: '|':NSView:0x7ff6abf74a80 )>",
"<NSLayoutConstraint:0x6000033c3b60 H:[Avid.RoundedWrap:0x7ff6abf74840]-(0)-|   (active, names: '|':NSView:0x7ff6abf74a80 )>",
"<NSAutoresizingMaskLayoutConstraint:0x6000033140f0 h=--& v=--& NSView:0x7ff6abf74a80.width == 0   (active)>"

如果我删除将 Box 的后沿固定到包含视图的约束，崩溃就会消失，但是我的 NSCollectionView 项目根本不会出现。

有没有更简单的方法来完成这一切？如何使用自动布局设置NSCollectionViewItems 的动态宽度？

【问题讨论】：

标签： cocoa nscollectionview nscollectionviewitem nscollectionviewflowlayout

【解决方案1】：

看来我是在正确的轨道上。我只需要添加：

item.view.layoutSubtreeIfNeeded()

这样

func collectionView(_ collectionView: NSCollectionView, itemForRepresentedObjectAt indexPath: IndexPath) -> NSCollectionViewItem {
  ///...
  item.view.layoutSubtreeIfNeeded()
  return item
}

为了使物品尺寸准确。

【讨论】：