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),，但没有减小其默认大小。是否可以将具有所需尺寸的自定义形状赋予芯片？如果是这样，怎么办？在此先感谢大家。

Answer 1

您可以将芯片包装在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),
      ),
    ),

Answer 2

包装标签：容器或SizedBox中的文本（“芯片”）。

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

Answer 3

您需要设置materialTapTargetSize。默认值为MaterialTapTargetSize.padded，它将芯片的minHeight设置为48px。将其设置为MaterialTapTargetSize.shrinkWrap可以删除多余的空间。

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

Answer 4

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

Answer 5

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

它不是来自flutter的本机窗口小部件。但这在这里解决了尺寸问题。

Answer 6

设置labelPadding：EdgeInsets.fromLTRB（0，-6，0，-6）

如何在颤动中调整芯片大小

6 个答案: