时间戳

首页 > 解决方案 > 具有使用自动布局的动态宽度项目的 NSCollectionView

cocoa - 具有使用自动布局的动态宽度项目的 NSCollectionView

问题描述

我正在构建一个NSCollectionView水平滚动的项目，看起来像这样：

目标

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

在此处输入图像描述

以下是 Box 的约束：

在此处输入图像描述

我已经连接了我的数据源，一切看起来都很好，只是我无法根据其中的视图大小来改变项目的宽度。

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

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到控制台时，它看起来是正确的。但是我遇到了Unable to simultaneously satisfy constraints与 Box 大小有关的崩溃（它有一个子类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项目根本不会出现。

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

标签： cocoanscollectionviewnscollectionviewitemnscollectionviewflowlayout

解决方案

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

item.view.layoutSubtreeIfNeeded()

像这样

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

为了使物品尺寸准确。

推荐阅读