如何在 Flutter 中让容器“减轻”搁置/点击？

Question

我正在尝试创建一个带有滚动视图的应用程序，并且对象像谷歌新闻应用程序一样可以点击。 任何人都可以回答如何为容器制作动画以在握住瓷砖时发出白光吗？

这是我为应用程序准备的列表视图生成器

                Container(
                  padding: EdgeInsets.only(top: 16),
                  child: ListView.builder(
                      physics: ClampingScrollPhysics(),
                      itemCount: article.length,
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemBuilder: (context, index) {
                        return news_tile(
                            imageurl: article[index].urlToimage,
                            news_title: article[index].title,
                            news_desc: article[index].description,
                            web_url: article[index].url
                        );
                      }),
                )

这是列表视图生成器调用的图块的内容

class news_tile extends StatelessWidget {
  String imageurl, news_title, news_desc,web_url;

  news_tile({this.imageurl, this.news_title, this.news_desc,this.web_url});

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.push(context, MaterialPageRoute(
            builder: (context) => article_view(
              web_url: web_url,
            )
        ));
      },
      child: Container(
        margin: EdgeInsets.only(bottom: 16),
        child: Column(
          children: <Widget>[
            ClipRRect(borderRadius: BorderRadius.circular(6), child: Image.network(imageurl)),
            SizedBox(
              height: 8,
            ),
            Text(news_title, style: TextStyle(fontSize: 17,fontWeight: FontWeight.w600)),
            SizedBox(
              height: 8,
            ),
            Text(news_desc, style: TextStyle(color: Colors.black54))
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以使用InkWell Widget go。 它提供了类似的点击/按住颜色效果。 在这里查看官方文档：

https://api.flutter.dev/flutter/material/InkWell-class.html

请注意，您需要一个Material Widget 作为 InkWell 的祖先，但文档对此进行了更多解释。

希望这对你有用！

编辑：抱歉，因为您使用的是容器， Ink对您也很重要： https://api.flutter.dev/flutter/material/Ink-class.html

查看文档部分“墨水飞溅不可见”。 为什么会这样。