首页 > 其他分享 >扩大按钮的点击区域 flutter

扩大按钮的点击区域 flutter

时间:2023-08-01 11:26:16浏览次数:33  
标签:onTap Container RaisedButton fireButtonClick 按钮 点击 child GestureDetector flutter

方法一

您可以将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,
                    ),
                  ),
                ),

 

标签:onTap,Container,RaisedButton,fireButtonClick,按钮,点击,child,GestureDetector,flutter
From: https://www.cnblogs.com/huangzs/p/17595974.html

相关文章

  • element-ui中的$comfirm点击取消后空格键和回车键依然执行删除操作
    原因: $comfirm会在上一次执行操作的按钮上自动聚焦选中如果这时点击回车或者空格键相当于又触发了一次删除按钮上的点击事件,而且默认回车和空格键会触发弹层上的确认按钮的点击事件,用户没有将鼠标定在确认按钮,这是组件自己封装的自动聚焦事件以及确认提交事件解决方法:强制取消键......
  • android重复点击问题
    openclassSingleClickListener(privatevalintervalMils:Long=1000):OnClickListener{privatevalTAG=this.javaClass.nameprivatevarmLastClickTime=0LoverridefunonClick(p0:View?){Logger.logger(TAG,"onClick")......
  • ugui学习 - 自己实现InputField鼠标点击调整光标位置,拖拽修改选中区域
    效果 代码usingUnityEngine;usingUnityEngine.EventSystems;usingUnityEngine.UI;publicclassMyInputField_CaretDragOp:MyInputField_TextSelect,IDragHandler,IPointerDownHandler{publicvoidOnPointerDown(PointerEventDataeventData){......
  • 微软bing(必应)搜索首页右上角三个按钮点击无效, 没有反应. 导致无法登录, 或者登陆了
    1.控制面板>网络和连接>网络和共享中心>点开自己的网>属性 TCP/IPv4改成如下图 2.cmd>ipconfig/flushdns ......
  • JDK 版本异常导致 flutter doctor --android-licenses 出错 (class file version 61.0
    flutterdoctor--android-licensesError:AJNIerrorhasoccurred,pleasecheckyourinstallationandtryagainExceptioninthread"main"java.lang.UnsupportedClassVersionError:com/android/sdklib/tool/sdkmanager/SdkManagerClihasbeencompil......
  • Flutter升级Gradle和Gradle Plugin
    Flutter升级Gradle和GradlePlugin目前Flutter3.0默认的Gradle版本是7.5,当然也有可能会更早一些。有时候因为某些需求要升级Gradle到新版本。本文以升级到8.2.1版本举例,会讲述Flutter项目中升级Gradle和GradlePlugin以及androidtools、设置镜像源等问题。......
  • 直播平台搭建,更改按钮文字默认大写的设置
    直播平台搭建,更改按钮文字默认大写的设置更改底部按钮默认大写的设置 <stylename="CustomAlertDialog"parent="@style/Theme.AppCompat.Light.Dialog.Alert">    <itemname="buttonBarButtonStyle">@style/CustomAlertDialogButton</item></sty......
  • Flutter 3.0+ 利用VLC播放器使用rtsp协议,本地测试和打包压缩
    Flutter中使用rtsp协议在Flutter中可以集成VLC播放器通过rtsp协议连接到监控相机来实现远程监控,当然也可以用来做直播APP。使用flutter_vlc_player库扩展包地址点我跳转。首先在pubspec.yaml中添加库引用:dependencies:flutter_vlc_player:^7.2.0安卓端配......
  • Flutter开发之——基本组件-Image
     图片属性,及充满、自适应大小风格https://blog.csdn.net/Calvin_zhou/article/details/113940867设置圆角或者圆图https://blog.csdn.net/Calvin_zhou/article/details/113993900......
  • Flutter系列文章-Flutter进阶2
    这一节我将再详细地为您介绍Flutter进阶主题,包括导航和路由、状态管理、异步处理、HTTP请求和RestAPI,以及数据持久化。让我们逐个介绍这些主题。1.导航和路由在Flutter中,导航和路由是构建多页面应用的关键概念。导航是指从一个页面(或称为路由)切换到另一个页面的过程。每个......