如何在Flutter中调整芯片的大小

Question

我想在我的视图中展示大量带有文本的芯片。由于数量很大，我想将芯片的大小缩小到最小，特别是芯片的高度。如何实现？

for (EPDiaryTarget target in widget.item.targetList) {
    Chip chip = new Chip(
      label: new Text(
        target.name,
        overflow: TextOverflow.ellipsis,
        style: new TextStyle(color: Colors.white),
      ),
      backgroundColor: const Color(0xFFa3bdc4),
    );
    studentsChips.add(chip);
  }

我已经为芯片提供了padding: new EdgeInsets.fromLTRB (5.0、0.0、5.0、0.0)，但它的默认大小没有减小。能否为芯片提供所需尺寸的自定义形状？如果可以，应该如何操作？感谢大家提前帮忙。

- Febin K R

Answer 1

你需要设置materialTapTargetSize。默认值是MaterialTapTargetSize.padded，它为芯片设置了最小高度为48px。将其设置为MaterialTapTargetSize.shrinkWrap以去除额外的空间。

Chip(
  ...,
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
)

- Awanish Raj

---

这是正确答案。此外，它也适用于“RawChip”。 - Leonardo Rignanese

如果您有一堆芯片在“Wrap”中，以便您在连续的行上拥有芯片，则这将使芯片文本紧密地结合在一起，但芯片的彩色背景会重叠。 - Luke Hutchison

Answer 2

您可以使用 Transform 组件将芯片包装起来，并按以下方式进行缩放：

    Transform(
      transform: new Matrix4.identity()..scale(0.8),
      child: new Chip(
        label: new Text(
          "Chip",
          overflow: TextOverflow.ellipsis,
          style: new TextStyle(color: Colors.white),
        ),
        backgroundColor: const Color(0xFFa3bdc4),
      ),
    ),

- chemamolins

---

在这种情况下，我不会说这是最好的解决方案，因为它会缩放芯片内部的文本，而这很可能不是期望的结果。 - Jeff S.

它保持了总大小，因此如果它们彼此相邻，则它们之间会有一个巨大的间隙。 - Jason Simpson

您可以使用另一个转换来反转标签的文本。这会再次放大文本。至少可以解决芯片缩小尺寸的问题。欢迎其他解决方案。 - Daniel

只是一点小提示，答案的更简洁版本：Transform.scale( scale: 0.8, child: (...) ) - Eren

我喜欢Flutter，但这些事情有时候真的很烦人...我们不能只调整大小而不用随意添加小部件吗 :/ - chichi

Answer 3

将标签：Text（'chip'）包装在Container或SizedBox中。

Chip(
    label: Container(
        width: 100,
        height: 40,
        child: Text('chip'),
    ),
)

- Alex.Marynovskyi

Answer 4

现在您可以使用 VisualDensity (https://api.flutter.dev/flutter/material/VisualDensity-class.html)，它是一个介于-4和4之间的双精度数值（[VisualDensity.minimumDensity]，[VisualDensity.maximumDensity]）。

- Arnaud Delubac

---

visualDensity: VisualDensity(horizontal: 0.0, vertical: -4)。谢谢，这为我解决了一个芯片漏洞。 - August Kimo

这个答案好多了，而且还符合我想要的药片形状！谢谢！ - Jacky Tang

Answer 5

要设置 labelPadding: EdgeInsets.fromLTRB(0, -6, 0, -6)

- Junliang Luo

---

在Android上设置负值没有问题，但在iOS上会导致错误。 - kaboc

对我来说恰恰相反。这在iOS上运行良好，但当芯片中有表情符号时，在Android和Web上会导致应用程序崩溃。 - August Kimo

Answer 6

尝试使用负填充

labelPadding: EdgeInsets.symmetric(vertical: -6, horizontal: -4)

我建议您根据设计尝试一些负填充，并在Flutter Inspector中查看更改，然后您的问题将得到解决。还有一件事，不要用容器包装chip小部件或不固定高度和宽度，只需提供标签填充即可。示例图像

- Anuj Kumar

Answer 7

也许可以使用徽章插件： https://pub.dev/packages/badges#-example-tab-

这不是Flutter的本地小部件，但它可以解决这里的大小问题。

- user650749