如何在Xamarin Forms中创建自适应宽度的分类列表

这里提供几种可行的实现方案，满足「每行无固定列、分类项根据内容自适应宽度」的需求：

方案1：Flexbox 实现（推荐） #

这是目前最主流的实现方式，兼容性好且代码简洁。

HTML 结构 #

<div class="category-list">
  <span class="category-item">家用电器</span>
  <span class="category-item">手机通讯</span>
  <span class="category-item">电脑、办公</span>
  <span class="category-item">数码</span>
  <span class="category-item">家具、家居</span>
  <span class="category-item">男装</span>
  <span class="category-item">美妆、个护清洁</span>
  <span class="category-item">女鞋、箱包</span>
  <span class="category-item">男鞋、运动、户外</span>
</div>

CSS 样式 #

.category-list {
  display: flex;
  flex-wrap: wrap; /* 超出容器宽度自动换行 */
  gap: 8px 12px; /* 控制分类项之间的上下/左右间距 */
  padding: 10px;
  border: 1px solid #eee;
}

.category-item {
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  white-space: nowrap; /* 强制内容单行显示，避免宽度被撑开过大 */
  min-width: 80px; /* 可选：设置最小宽度，防止内容过短的项太窄 */
  text-align: center;
}

/* 可选：添加 hover 交互效果 */
.category-item:hover {
  background-color: #e0e0e0;
  cursor: pointer;
}

核心要点：通过flex-wrap: wrap实现自动换行，子项不设置固定宽度，由自身内容撑开；white-space: nowrap保证每个分类项的内容不换行，宽度更规整。

方案2：CSS Grid 实现 #

适合需要更精细化布局控制的场景，语法更直观。

CSS 样式（HTML 结构同方案1） #

.category-list {
  display: grid;
  /* 自动根据容器宽度调整列数，列宽由内容决定 */
  grid-template-columns: repeat(auto-fit, minmax(min-content, auto));
  gap: 8px 12px;
  padding: 10px;
  border: 1px solid #eee;
}

.category-item {
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
}

核心要点：repeat(auto-fit, minmax(min-content, auto))是关键，它会自动计算容器内可容纳的列数，每列宽度由内容最小宽度决定，超出后自动换行。

方案3：Inline-block 兼容方案 #

针对需要兼容旧浏览器（如 IE11）的场景，可以使用该方案。

CSS 样式（HTML 结构同方案1） #

.category-list {
  padding: 10px;
  border: 1px solid #eee;
  font-size: 0; /* 消除 inline-block 元素之间的空白间隙 */
}

.category-item {
  display: inline-block;
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px; /* 恢复子项的字体大小 */
  margin: 4px 6px; /* 控制分类项之间的间距 */
  min-width: 80px;
  text-align: center;
}

核心要点：利用inline-block让元素在一行排列，超出自动换行；通过font-size: 0消除元素间默认的空白间隙，避免布局错位。

内容的提问来源于stack exchange，提问作者Kirti Zare