扩大按钮的点击区域 flutter

发布时间 2023-08-01 11:13:30作者: 丷dante丶灬

方法一

您可以将RaisedButton Package 成Container,并在Container中添加一些填充,然后将Container Package 成GestureDetector,这样就可以启用小部件的多次点击事件。
GestureDetector还有一个onTap回调函数,您可以使用它来执行与单击真实的RaisedButton时相同的代码。
下面是一个简单的代码示例:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Stackoverflow example'),
      ),
      body: Center(
        child: GestureDetector(
          child: Container(
            width: 120,
            height: 80,            
            padding: EdgeInsets.all(10),
            color: Colors.blueAccent,
            child: Center(
              child: RaisedButton(                
                child: Text('Click me'),
                onPressed: _fireButtonClick,
              ),
            )         
          ),
          onTap: _fireButtonClick
        ),
      ),
    );
  }

现在将RaisedButtononPressed代码提取到一个专用函数中,您可以将该函数分配给RaisedButtononPressedGestureDetectoronTap回调:

void _fireButtonClick() {
  print('button clicked');
}

 

 

方法二

您可以通过在GestureDetector上使用behavior: HitTestBehavior.translucent来完成此操作。
并且使用Padding小部件作为子小部件,那么您只需使用填充值给予额外的命中区域。

GestureDetector(
                  behavior: HitTestBehavior.translucent, // Needed for invisible things to be tapped.
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: Padding(
                    padding: EdgeInsets.all(9.0), // Configure hit area.
                    child: FaIcon(
                      FontAwesomeIcons.xmark,
                    ),
                  ),
                ),