Question

我有一个屏幕，其中有一个图像，在该屏幕的顶部，我排成一行，并用手势检测器包裹了两个图标，并且所有图标都位于堆栈中。但是，每当我点击任何按钮时，它们都不起作用。请告诉我如何解决这个问题。下面是我的代码段。...

import 'package:flutter/material.dart';
import 'package:news/ui/bookmark.dart';
import 'package:share/share.dart';

class DetailScreen extends StatefulWidget {
final String title, description, image, author, content;

DetailScreen(
  {this.title, this.image, this.description, this.author, this.content});

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

class _DetailScreenState extends State<DetailScreen> {
List<String> list = [];

@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
  body: ListView(
    children: <Widget>[
      Container(
        height: size.height / 2.6,
        child: Stack(
          fit: StackFit.loose,
          children: <Widget>[
            SizedBox(
                height: size.height / 2.8,
                width: size.width,
                child: Image.network(
                  widget.image,
                  fit: BoxFit.fill,
                )),
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  GestureDetector(
                    child: Icon(
                      Icons.arrow_back,
                      color: Colors.white,
                    ),
                    onTap: () {
                      print('Damn You'); //Doesn't work 
                    },
                  ),
                  GestureDetector(
                      child: Icon(
                        Icons.share,
                        color: Colors.white,
                      ),
                      onTap: () {
                        Share.share('${widget.image}' +
                            '\n${widget.title}' +
                            '\n${widget.description}');
                      }), //Doesn't work 
                ],
              ),
            ),
            InkWell(
              onTap: () {
                list.add(widget.title);
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => Bookmark(
                              list: list,
                            )));
              },
              child: Padding(
                padding: const EdgeInsets.only(right: 15.0),
                child: Align(
                  alignment: Alignment.bottomRight,
                  child: Container(
                    height: 60.0,
                    width: 60.0,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25.0),
                        color: Colors.blue),
                    child: Icon(
                      Icons.bookmark,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ), //works fine
      Padding(
        padding:
            const EdgeInsets.only(left: 15.0, bottom: 15.0, right: 15.0),
        child: Text(
          widget.title,
          style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
              color: Colors.black),
          overflow: TextOverflow.clip,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(bottom: 15.0, left: 15.0),
        child: Row(
          children: <Widget>[
            Icon(
              Icons.edit,
              color: Colors.grey,
              size: 15.0,
            ),
            SizedBox(
              width: 5.0,
            ),
            Text(
              widget.author == null ? 'No Author' : widget.author,
              style: TextStyle(
                color: Colors.grey,
              ),
              overflow: TextOverflow.ellipsis,
            )
          ],
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(
          left: 15.0,
          right: 15.0,
        ),
        child: Divider(
          color: Colors.grey,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(top: 15.0, left: 15.0, right: 15.0),
        child: Text(
          widget.content == null
              ? 'Sorry this document has no content'
              : widget.content,
          //overflow: TextOverflow.clip,
        ),
      ),
    ],
  ),
 );
  }
}

如何解决问题，请帮忙。预先感谢

Answer 1

这是因为InkWell（）小部件隐藏在容器的背景中。这是因为它引用了顶级Material（）小部件。您需要做的就是在CircularAvatar（）小部件上方实例化一个新的Material（）小部件，从而使CircularAvatar（）为父级。

在您的TopArea（）小部件上，将CircularAvatar（）小部件设置为 Material（）小部件又使InkWell（）小部件成为其子代。

以下示例

 Widget topArea() { 
    return Row( 
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[ 
      // Other top widget codes goes here

       CircleAvatar( 
          radius: 25.0, 
          //backgroundColor: Colors.transparent, 
           backgroundImage: NetworkImage( "https://images.pexels.com/photos/1138409/pexels-photo- 1138409.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", ), 
         child: Material(
            type: MaterialType.transparency,
            child: InkWell( 
               onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => {})),
              highlightColor: Colors.red[200].withOpacity(0.5),
              splashColor: Colors.red[200].withOpacity(0.5),
              borderRadius: BorderRadius.circular(25.0),
              radius: 25.0
          )
        ),

      ),
   ],
 );
}

已更新：

代替GestureDectector（），请在下面尝试此

 IconButton(
   icon: Icon( Icons.arrow_back),
   color: Colors.white, 
   onPressed: () { print('Hello World')}
 )

运行应用程序时，请单击按钮，检查控制台是否打印了“ Hello World”。

Iconbuttons的onTap方法或任何其他onTap不能在flutter中的堆栈小部件内工作吗？

1 个答案: