如何将 onPressed 和 onLongPress 添加到 Row 内的 Flutter Center Widget？

Question

我试图将 onLongPress 与 onPressed 添加到图像按钮是徒劳的。我收到错误消息：未定义命名参数 'onDoubleTap'。

我有多行 2 个水平图像按钮使用 rows 和 expanded。除 onLongPress（或 onDoubleTap）外，一切正常。我做错了什么，我是否必须以不同的格式重建整个代码，或者我是否过于复杂了？

我也尝试添加一个新的child（错误：已经定义），GestureDetector，InkWell，没有成功。

body: SingleChildScrollView(
      child: Container(
        child: Column(
          children: <Widget>[
            Center(
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                  Expanded(
                      child: FlatButton(               
                          onPressed: () {
                            setState(() {
                              launchURL();
                            });
                          },  

                          //Trying to add onLongPress , error: "onLongPress not defined
                          //If I try add a new child it says child already defined

                          onLongPress: () => _showAlertMessage(context, "message"),


                          padding: EdgeInsets.all(6.0),
                          child: Image.asset(
                            'images/image1.png',
                          ))),

                  Expanded(
                      child: FlatButton(                     
                          onPressed: () {
                            setState(() {
                              launchURL();
                            });
                          },
                          padding: EdgeInsets.all(6.0),
                          child: Image.asset(
                            'images/image2.png',
                          )
                      )//flat button
                  ),//expanded
                ])), //row-center

                //Repeat above for rows of 2 more image buttons

代码为每个按钮运行一个 onPressed 并且不显示任何错误，但添加任何第二个点击事件会显示错误。

Answer 1

Flatbutton 只支持onPressed 回调，不支持onLongpressed 等。建议您re-look 使用手势检测器或其他支持长按的widget。我会尝试使用两个容器，每个容器都包裹在一个手势检测器小部件中，如行中的 children 。每个容器都有一个文本 and/or 图片内容。然后，您可以在每个容器上选择 onTap、双击、长按等。没有像我在 phone 上那样测试这个，但应该可以。它们可能是比容器更优雅的小部件。

Answer 2

感谢您的反馈，非常感谢。我用列内的手势检测器替换了 flatButton，使用 onTap 而不是 onPressed，将图像放在新列中，添加了 onLongPress。代码运行。当我添加第二个 Expanded 时出现此错误：

E/InputMethodManager( 7133): prepareNavigationBarInfo() rootView is null

我在这里读到 "RootView is the View in which all the other views are placed. It is like the root node in a tree structure which is the parent to all the children."，但我看不到我的错误。我完全重新启动，错误消失了。

            Container(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
              Expanded(
                child: GestureDetector(
                    onLongPress: () {
                      setState(() {
                        _showAlertMessage(context, "message");
                      });
                    },
                    onTap: () {
                      setState(() {
                        _launchUrl;
                      });
                    },
                    child: Container(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          'images/image1.png',
                        ) 
                        )),
              ), //Expanded

              Expanded(
                child: GestureDetector(
                    on: () {
                      setState(() {
                        _showAlertMessage(context, "message");
                      });
                    },
                    onTap: () {
                      setState(() {
                        _launchUrl;
                      });
                    },
                    child: Container(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          'images/image2.png',
                        ) 
                        )),
              ), 


            ])),

Answer 3

注意： 作为 flutter 的第 2 版 FlatButton 已弃用。您应该改用 TextButton。

我不知道您是如何使用 GestureDetector 但它是适合您问题的最佳解决方案，并且支持用户按键手势的不同方面。所以我准备了下面的示例代码，看看它是如何工作的。

        body: SingleChildScrollView(
        child: Container(
            child: Column(children: <Widget>[
  Center(
      child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
        Expanded(
            child: GestureDetector(
              onTap: () => print('onTap'), 
              onLongPress: () => print('onLongPress'), 
              onDoubleTap: () => print('onDoubleTap'), 
              child: Image.network(
              'https://lp-cms-production.imgix.net/image_browser/social-beast-GettyRF_136327669.jpg?auto=format&fit=crop&sharp=10&vib=20&ixlib=react-8.6.4&w=850&q=50&dpr=2'),
            ) //flat button
        ),

        Expanded(
            child: GestureDetector(
              onTap: () => print('onTap'), 
              onLongPress: () => print('onLongPress'), 
              onDoubleTap: () => print('onDoubleTap'), 
              child: Image.network(
              'https://lp-cms-production.imgix.net/image_browser/lions-hunting-500pxRF_7416880.jpg?auto=format&fit=crop&sharp=10&vib=20&ixlib=react-8.6.4&w=850&q=50&dpr=2'),
            )
        ), //expanded
      ])
  ), //row-center
]
            )
        )
    )

GestureDetector 还有很多其他手势可以找到 here。

如何将 onPressed 和 onLongPress 添加到 Row 内的 Flutter Center Widget？

How do I add both onPressed and onLongPress to a Flutter Center Widget inside a Row?

flutter-layout

flutter-onpressed