TextButton MaterialTapTargetSize

TextButton是一个可点击的文本按钮，可以设置多种属性来定制按钮的外观和行为。其中一个属性是MaterialTapTargetSize，用于设置按钮在被点击时的大小。

MaterialTapTargetSize属性

MaterialTapTargetSize是一个枚举类型，包含如下选项：

• padded：按钮被点击时会扩展到它的父容器的填充区域，通常是包含按钮的组件的边界，如Card或Container。

• shrinkWrap：按钮被点击时只会扩展到其实际大小，即按钮文本所需要的空间大小。

使用MaterialTapTargetSize属性

要使用MaterialTapTargetSize属性，只需要将其值传递给TextButton的构造函数即可。例如：

TextButton(
  onPressed: () {},
  child: Text('My Button'),
  style: TextButton.styleFrom(
    tapTargetSize: MaterialTapTargetSize.padded,
  ),
),

MaterialTapTargetSize.padded

当MaterialTapTargetSize设置为padded时，按钮在被点击时会扩展到其父容器的边界，让扩展区域的大小保持与容器相同。这通常用于包含按钮的组件本身不可点击但是需要扩展点击区域的情况。

Container(
  padding: EdgeInsets.all(16.0),
  child: TextButton(
    onPressed: () {},
    child: Text('My Button'),
    style: TextButton.styleFrom(
      tapTargetSize: MaterialTapTargetSize.padded,
    ),
  ),
),

MaterialTapTargetSize.shrinkWrap

当MaterialTapTargetSize设置为shrinkWrap时，按钮在被点击时只会扩展到其实际大小，即按钮文本所需要的空间大小，这个选项通常用于按钮本身就很小的情况。

TextButton(
  onPressed: () {},
  child: Text('My Button'),
  style: TextButton.styleFrom(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
),

可定制化的TextButton

如果您希望更直接的控制按钮的大小，您可以通过包装TextButton来实现。例如，下面的示例演示了如何创建一个具有任意大小和圆角的TextButton。

Container(
  width: 200.0,
  height: 40.0,
  child: TextButton(
    onPressed: () {},
    child: Text('My Button'),
    style: TextButton.styleFrom(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0),
      ),
    ),
  ),
),

这里，我们包装了一个TextButton在一个具有固定大小的容器中，并使用RoundedRectangleBorder来设置圆角。由于我们没有指定MaterialTapTargetSize属性，点击区域不会被扩展。