Question

Flutter Github中的问题类似：https://github.com/flutter/flutter/issues/23454。我的手势检测器有麻烦的问题。方法onTap()不能打印出来。它看起来像静态的，但是我将其放在有状态的小部件中，并在有状态的小部件中编写了该代码段，如下所示：

class HeaderData extends StatefulWidget {

  @override
  _HeaderDataState createState() => _HeaderDataState();
}

class _HeaderDataState extends State<HeaderData> {
  List<String> lsDummy = ['image1',
    'image2',
    'image3'
  ];

  @override
  Widget build(BuildContext context) {

    return Stack(
      children: <Widget>[
        Container(
          height: 250,
          child: Swiper(
            autoplayDelay: 3000,
              itemCount: lsDummy.length,
            autoplay: true,
            pagination: SwiperPagination(),
            itemBuilder: (context, index){
                return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
            },
          ),
        ),
        Container(
          padding: const EdgeInsets.only(left: 16.0, right: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const SizedBox(height: 70),
                  Image(
                    image: AssetImage('images/travel_logo.png'),
                    alignment: Alignment.center,
                    width: 200,
                    color: Colors.blue,
                  ),
                  const SizedBox(height: 20.0),
                ],
              ),
              GestureDetector(
              onTap: (){
                print('test');
              }, 
                  child: Container(
                    padding: EdgeInsets.all(4),
                      child: Icon(Icons.settings, color: Colors.white,)
                  )
              ),

            ],
          ),
        ),

        Padding(
          padding: const EdgeInsets.only(top: 150),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 20),
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),
        SizedBox(height: 10.0),
      ],
    );
  }
}

如果我们运行应用程序，则此小部件将呈现为该图片。有人可以帮助我为什么会这样吗？如果您认为这个问题不清楚，请告诉我。这样我就可以更新问题了

更新我已经使用iconButton尝试了代码，但仍然无法触发print

return Stack(
      children: <Widget>[
        Container(
          height: 250,
          child: Swiper(
            autoplayDelay: 3000,
              itemCount: lsDummy.length,
            autoplay: true,
            pagination: SwiperPagination(),
            itemBuilder: (context, index){
                return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
            },
          ),
        ),
        Container(
          padding: const EdgeInsets.only(left: 16.0, right: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const SizedBox(height: 70),
                  Image(
                    image: AssetImage('images/travel_logo.png'),
                    alignment: Alignment.center,
                    width: 200,
                    color: Colors.blue,
                  ),
                  const SizedBox(height: 20.0),
                ],
              ),
              IconButton(
                  icon: Icon(Icons.settings, color: Colors.white,),
                  onPressed: ()=> print('test')
              )
            ],
          ),
        ),

        Padding(
          padding: const EdgeInsets.only(top: 150),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 20),
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),
        SizedBox(height: 10.0),
      ],
    );

更新2 我为此做了新的实验。我尝试制作其他小部件上方的虚拟容器。然后我设置手势检测器。但我仍然没有达到要求。这是我的代码和小部件的图片。顺便说一句，在扑扑的github上也有类似的问题，在这里：https://github.com/flutter/flutter/issues/23454 票务问题仍未解决。

@override
  Widget build(BuildContext context) {

    return Stack(
      children: <Widget>[
        Container(
          height: 250,
          child: Swiper(
            autoplayDelay: 3000,
              itemCount: lsDummy.length,
            autoplay: true,
            pagination: SwiperPagination(),
            itemBuilder: (context, index){
                return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
            },
          ),
        ),

        Padding(
          padding: const EdgeInsets.only(top: 150),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 50),
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.only(top: 50),
          child: Image(image: AssetImage('images/travel_logo.png'),
            alignment: Alignment.center,
            width: 200,
            color: Colors.blue,),
        ),
        GestureDetector(
          onTap: (){
            print('teste');
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.grey,
          ),
        )
      ],
    );

  }

Answer 1

尝试将容器添加到列表底部，以确保其他小部件不覆盖该容器。


class HeaderData extends StatefulWidget {

  @override
  _HeaderDataState createState() => _HeaderDataState();
}

class _HeaderDataState extends State<HeaderData> {
  List<String> lsDummy = ['image1',
    'image2',
    'image3'
  ];

  @override
  Widget build(BuildContext context) {

    return Stack(
      children: <Widget>[
        Container(
          height: 250,
          child: Swiper(
            autoplayDelay: 3000,
              itemCount: lsDummy.length,
            autoplay: true,
            pagination: SwiperPagination(),
            itemBuilder: (context, index){
                return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
            },
          ),
        ),

        Padding(
          padding: const EdgeInsets.only(top: 150),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 20),
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),


        SizedBox(height: 10.0),

 Container(
          padding: const EdgeInsets.only(left: 16.0, right: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const SizedBox(height: 70),
                  Image(
                    image: AssetImage('images/travel_logo.png'),
                    alignment: Alignment.center,
                    width: 200,
                    color: Colors.blue,
                  ),
                  const SizedBox(height: 20.0),
                ],
              ),
              GestureDetector(
              onTap: (){
                print('test');
              }, 
                  child: Container(
                    padding: EdgeInsets.all(4),
                      child: Icon(Icons.settings, color: Colors.white,)
                  )
              ),

            ],
          ),
        ),

      ],
    );
  }
}

Answer 2

好吧，我刚刚找到了你的问题。我刚刚使用了您的代码，发现设置图标出现在带有行的容器下方。解决方案可以是增加Icon的底部填充，如下所示：

             GestureDetector(
                  onTap: (){
                    print('test');
                  },
                  child: Container(
                         padding: EdgeInsets.only(bottom: 50), //this is the changes
                         child: Icon(Icons.settings, color: 
                         Colors.white,))

另一种解决方案是增加包含子文本“ PILIH DESTINASI”的容器的边距对称，如下所示：

      Padding(
           padding: const EdgeInsets.only(top: 150),
           child: Container(
            margin: EdgeInsets.symmetric(horizontal: 50), //this is the changes
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
                color: Colors.blue.withOpacity(0.8),
                borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: 
                Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),

手势检测器无法在StackView中触发

2 个答案: