如何使容器的填充可以点击？

Question

我希望能够单击 GestureDetector 小部件周围的填充并触发它的 onTap 方法。我不想改变图标本身的大小。这是到目前为止的代码。

class InfoButton extends StatelessWidget {
  final String text;
  final double padding;
  static const double defaultPadding = 5;

  const InfoButton({Key key, @required this.text, this.padding = defaultPadding}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(padding),
      decoration: BoxDecoration(border: Border.all()),
      child: GestureDetector(
        child: Icon(
          Icons.info_outline,
          color: Colors.blue,
          size: 20,
        ),
        onTap: () {
          print('clicked');
        },
      ),
    );
  }
}

如何在颤振中实现这一点？

Answer 1

只需将Container 包含为GestureDetector 的子代而不是Icon 并将GestureDetector 的behavior 属性设置为HitTestBehavior.opaque 就像这样

   Widget build(BuildContext context) {
       return GestureDetector(
             behavior: HitTestBehavior.opaque,
                  onTap: () {
                    print('clicked');
                  },
              child : Container(
                padding: EdgeInsets.all(padding),
                decoration: BoxDecoration(border: Border.all()),
                  child: Icon(
                    Icons.info_outline,
                    color: Colors.blue,
                    size: 20,
                  )
                ),
              );
            }