flutter - 在 MaterialButton 中使用 materialTapTargetSize 会有所不同

Question

我没有注意到materialTapTargetSize使用或不使用的区别。当 materialTapTargetSize 为 时也没有区别padded。那么 materialTapTargetSize 是如何以及何时产生影响的呢？

MaterialButton(
      padding: EdgeInsets.symmetric(vertical: 4),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ...

标签： flutter

Answer 1

MaterialTapTargetSize用于配置像按钮这样的点击目标的大小。它有 2 个不同的值，填充和收缩包装。请注意，它并不真正影响可见按钮的大小，而是会触发按钮按下的目标的大小。ShrinkWrap 将尺寸保持在最小，而 padded 将点击目标的尺寸增加到 48px * 48px，如果它小于该尺寸，并且如果按钮的尺寸不小于 48px * 48px，则将不起作用。

让我们看一下这个例子。这是一个包含 2 个材质按钮和 2 个单选按钮的列。

Column(
      children: [
        SizedBox(
          height: 100,
        ),
        MaterialButton(
          padding: EdgeInsets.symmetric(vertical: 4),
          materialTapTargetSize: MaterialTapTargetSize.padded,
          color: Colors.red,
          child: Text('Button 1'),
          height: 50,
          onPressed: () {
            print('pressed');
          },
        ),
        MaterialButton(
          padding: EdgeInsets.symmetric(vertical: 4),
          color: Colors.red,
          height: 20,
          child: Text('Button 2'),
          materialTapTargetSize: MaterialTapTargetSize.padded,
          onPressed: () {
            print('pressed');
          },
        ),
        Radio(
          value: 1,
          groupValue: 1,
          onChanged: (_) {
            print('1 pressed');
          },
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        ),
        Radio(
          value: 1,
          groupValue: 2,
          onChanged: (_) {
            print('2 pressed');
          },
          materialTapTargetSize: MaterialTapTargetSize.padded,
        ),
      ],
    )

这里按钮 1 和按钮 2 都被填充，但按钮 1 的大小是 50 像素 * 390 像素（在我的设备上，但宽度可能会有所不同，仍然会大于 48 像素），但按钮 2 的高度是 20 像素。按钮 2 的可见高度仅为 20 像素，但点击目标高度为 48 像素（从按钮 1 和按钮 2 之间的空白区域可以明显看出）。因此按钮 2 周围的垂直空白区域也会触发按钮 2 的按钮按下。

第一个图像显示了调试绘制关闭的布局，而第二个图像显示了调试绘制打开的布局。注意按钮 2 周围的垂直空间，即按钮 2 的点击目标的大小。还要注意按钮 1 周围没有多余的空间。这是因为按钮 1 的高度已经超过 48 像素。

在第一张图片中，两个单选按钮的大小看起来相同，但在第二张图片中，很明显在第二张单选按钮旁边有一些额外的空间。这是因为默认情况下单选按钮的大小是 40px * 40 px。由于第一个单选按钮具有 materialTapSize 作为 shrinkWrap，因此它的点击目标大小设置为最小。然而，由于第二个单选按钮的 materialTapSize 设置为填充，它的大小增加到 48px * 48px。