时间戳

首页 > 解决方案 > 如何在 Flutter 中随 Chip inside Wrap 一起缩放芯片布局框

flutter - 如何在 Flutter 中随 Chip inside Wrap 一起缩放芯片布局框

问题描述

在 Wrap 内部，我有一组 StatelessWidget 表示标签。现在，子小部件只返回一个 Chip。我的 Tag 小部件的构建方法如下所示：

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

Chips 渲染如下：

原来的

我想渲染更小的芯片，所以按照这里的建议，我已将其更新为：

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

这是结果：

缩放

我想保留芯片之间的初始间距，但似乎转换并未改变芯片的原始布局大小：

用调试油漆缩放

调试油漆在每个芯片的右侧和底部显示了额外的非缩放填充。有什么办法可以去掉这个吗？

标签： flutter

解决方案

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

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

CMD+点击shringWrap，你会看到它说：“将点击目标尺寸缩小到材料规格提供的最小值。”

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],
),

推荐阅读