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

Question

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

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

我还尝试添加一个新的孩子（错误：已定义）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 等。建议您重新考虑使用手势检测器或其他支持长按的小部件。 我会尝试使用两个容器，每个容器都包装在一个手势检测器小部件中，作为行中的子级。每个容器都有一个文本和/或图像内容。然后，您可以在每个容器上拿起 onTap、双击、长按等。没有测试过这个，因为我在我的手机上，但应该可以工作。它们可能是比容器更优雅的小部件。

Answer 2

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

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

我在这里读到“RootView 是放置所有其他视图的视图。它就像树结构中的根节点，它是所有子节点的父节点。”，但我看不出我的错误这里。我做了一个完全重启，那个错误消失了。

            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 FlatButton 的第 2 版已弃用。你应该改用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 中找到。