利用 CollectionView 的强大功能（第 3 部分） - 动态布局变化

这是突出显示 `CollectionView` 的系列文章的第 3 部分，`CollectionView` 是一种功能强大的列表控件，它拥有可回收的行，可为您提供每个平台上最优秀的性能，以满足各种需求。

• 第 1 部分 - iOS 的可滑动单元格
• 第 2 部分 - Android 的可滑动单元格
• → 第 3 部分 - 动态布局变化
• 第 4 部分 - 下拉刷新和无限加载
• 第 5 部分 - 分组显示数据 - *即将推出*
• 第 6 部分 - 标题和页脚 - *即将推出*

👉 演示仓库

继续讨论动态布局变化，让我们看看如何为集合的显示布局提供多样性。

colWidth 和 rowHeight 是你的好朋友

CollectionView 支持 `colWidth` 和 `rowHeight` 属性，允许您随时切换布局。

<CollectionView colWidth="50%" rowHeight="30%" />

这些属性可以是百分比 `string` 或固定大小的 `number`，例如 `100`（*对于每行精确 100 dip 的高度*）。

这些设置将提供一个两列布局，其中每列占用可用控件宽度的 50%，每行占用 CollectionView 区域本身的 30%，适用于 iOS 和 Android。如此简单的功能却提供了强大的选项！

例如，假设我们想要一个三列布局，其中每列占用 33.33%（大约 1/3）的控件空间，每行占用大约 18% 的高度。

<CollectionView colWidth="33.33%" rowHeight="18%" />

动态布局变化

如果我们想要通过用户界面切换开关动态更改布局，我们可以对这些属性进行数据绑定。

<CollectionView colWidth="{{ colWidth }}" rowHeight="{{ rowHeight }}" />

提供一个按钮，使用类似以下内容更改这些绑定。

<Button text="Change Layout" tap="{{ changeLayout }}" />

function changeLayout() {
  colWidth = '100%';
  rowHeight = 100;
}

使用您熟悉的绑定语法（*Angular、React、Solid、Svelte 或 Vue*），这将改变您的 CollectionView 的布局。

但是您可能会注意到一些奇怪的事情，即布局在每次动态更新时并没有完全更新。

确保动态布局更新正确

CollectionView 提供了一个 `refresh` 方法，该方法有时可以纠正此类布局问题。但是，如果它不起作用，我们可以应用一个技巧，通过所有 NativeScript 控件的 `visibility` 模式来强制布局进行测量。

function changeLayout() {
  colWidth = '100%';
  rowHeight = 100;
  collectionView.visibility = CoreTypes.Visibility.collapse;
  setTimeout(() => {
    collectionView.visibility = CoreTypes.Visibility.visible;
  }, 1);
}         

这是一个巧妙的技巧，它将在下一个 JavaScript 刻度上简单地强制进行布局传递（*了解更多信息：* https://nodejs.dev/en/learn/understanding-processnexttick/#:~:text=js event loop%2C one important,we call it a tick.)

由于 NativeScript 方便地在 UI 线程上像自然平台一样运行，因此它实现了我们想要的效果...此外，它还非常快且同步！

接下来我们将探讨“下拉刷新和无限加载”！

关于 nStudio

nStudio 由开源合作者于 2016 年创立，以建立一个健康的开源治理模式而闻名，为全球社区围绕 NativeScript 的利益提供服务。如果您需要项目方面的专业帮助，nStudio 提供跨多个学科的服务，您可以通过 [email protected] 与他们联系。