如何在抖动中随芯片内部包裹缩放芯片布局框

Question

在Wrap中，我有一个表示标记的StatelessWidget数组。现在，子小部件只返回一个Chip。我的Tag小部件的build方法如下：

  Widget build(BuildContext context) {
    return Chip(
        label: Text('#the-tag-name'));
  }

芯片的渲染方式如下：

​

​

我想渲染更小的芯片，所以遵循here的建议，我将其更新为：

  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()..scale(0.8),
      child: Chip(
          label: Text('#the-tag-name')),
    );
  }

这就是结果：

​

​

我希望保留芯片之间的初始间距，但似乎转换并没有转换芯片的原始布局大小：

​

​

调试画图在每个芯片的右侧和底部显示了额外的未缩放填充。有什么方法可以去掉它吗？

Answer 1

我的建议是远离使用Transform。它可能导致意想不到的后果。

您的Chip填充不会变小的原因是因为它受到材料规格的限制。可单击的小部件具有最小tapTarget大小。您可以通过查看芯片上的materialTapTargetSize来测试这一点。

shringWrap上的CMD+click，您将看到它显示：“将攻丝目标尺寸缩小到材料规格提供的最小尺寸。”

Chip(
   label: Text('#the-tag-name', 
   style: TextStyle(fontSize: 10.0)),
   materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),

因此，如果你真的需要缩小你的小部件，你最好的选择是走另一条路。可能通过使用这样的RawMaterialButton：填充和textSize可以根据需要进行调整。

RawMaterialButton(
  onPressed: () {},
  constraints: BoxConstraints(),
  padding: EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 4.0),
  child: Text(
    '#the-tag-name',
    style: new TextStyle(fontSize: 12.0),
  ),
  shape: RoundedRectangleBorder(
    borderRadius: new BorderRadius.circular(18.0),
  ),
  fillColor: Colors.grey[300],
),