如何调整Flutter中切屑的大小

a1o7rhls 于 2022-12-05 发布在 Flutter

关注(0)|答案(7)|浏览(167)

我想在我的视图中显示大量的筹码，并在其中显示文字。由于筹码数量很大，我想将筹码的大小减小到最小。特别是筹码的高度。如何做到这一点？

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),的芯片，但它的默认大小没有减少。可以一个自定义形状与所需的大小给一个芯片？如果是这样，它是如何做到的？提前感谢乡亲。

flutter

来源：https://stackoverflow.com/questions/51440984/how-to-adjust-the-size-of-a-chip-in-flutter

7条答案

按热度按时间

niknxzdl1#

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

赞(0）回复(0）举报 2022-12-05

vnjpjtjt2#

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

赞(0）回复(0）举报 2022-12-05

7eumitmz3#

Package 标签：容器或尺寸盒中的文本（“芯片”）。

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

赞(0）回复(0）举报 2022-12-05

v1l68za44#

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

赞(0）回复(0）举报 2022-12-05

qnzebej05#

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

赞(0）回复(0）举报 2022-12-05

eivgtgni6#

也许是使用徽章插件：https://pub.dev/packages/badges#-example-tab-
它不是Flutter的原生小部件，但它解决了这里的大小问题。

赞(0）回复(0）举报 2022-12-05

vc9ivgsu7#

以负数填补尝试
标签填充：边缘插入对称（垂直：-6，水平：-4个）
我还建议你尝试一些负填充根据你的设计，并看到在Flutter检查器的变化，然后你的问题将得到解决或一件事不要 Package 芯片小部件与容器或不固定的高度和宽度，只是提供标签填充Example image

赞(0）回复(0）举报 2022-12-05