时间戳

首页 > 解决方案 > 如何使容器在 Flutter 中保持/点击时“变亮”？

flutter - 如何使容器在 Flutter 中保持/点击时“变亮”？

问题描述

在此处输入图像描述

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

这是我为应用程序提供的列表视图构建器

                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))
          ],
        ),
      ),
    );
  }
}

标签： flutter

解决方案

您可以使用InkWell小部件。它提供了类似的点击/保持颜色效果。在这里查看官方文档：

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

请注意，您需要一个Material小部件作为 InkWell 的祖先，但文档对此进行了更多说明。

希望对你有帮助！

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

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

推荐阅读