[英]How to make a container 'lighten' on hold / on tap in Flutter?
I am trying to create an app with a scroll view and the objects are clickable like the google news app.我正在尝试创建一个带有滚动视图的应用程序,并且对象像谷歌新闻应用程序一样可以点击。 Can anyone answer how to animate the container to have a white glow on holding the tile?
任何人都可以回答如何为容器制作动画以在握住瓷砖时发出白光吗?
Here is the list view builder I have for the app这是我为应用程序准备的列表视图生成器
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
);
}),
)
and this is the contents of the tile which the list view builder calls这是列表视图生成器调用的图块的内容
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))
],
),
),
);
}
}
You could go with the InkWell
Widget.您可以使用
InkWell
Widget go。 It provides a tapping/holding color effect similar to that.它提供了类似的点击/按住颜色效果。 Have a look at the official docs here:
在这里查看官方文档:
https://api.flutter.dev/flutter/material/InkWell-class.html https://api.flutter.dev/flutter/material/InkWell-class.html
Note that you need a Material
Widget as an ancestor of your InkWell, but the docs explain that more.请注意,您需要一个
Material
Widget 作为 InkWell 的祖先,但文档对此进行了更多解释。
Hope it works for you!希望这对你有用!
Edit: Sorry, since you are working with a Container, Ink
is also important for you: https://api.flutter.dev/flutter/material/Ink-class.html编辑:抱歉,因为您使用的是容器,
Ink
对您也很重要: https://api.flutter.dev/flutter/material/Ink-class.html
Check the docs section "The ink splashes aren't visible."查看文档部分“墨水飞溅不可见”。 for why that is.
为什么会这样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.