美文网首页
Flutter-溅墨效果(InkWell)

Flutter-溅墨效果(InkWell)

作者: 梦幽辰 | 来源:发表于2019-12-31 16:16 被阅读0次
Stack(
  children: <Widget>[
    Column(
      children: <Widget>[
        AspectRatio(
          aspectRatio: 16/9,
          child: Image.network(posts[index].imageUrl, fit: BoxFit.cover,),
        ),
        SizedBox(height: 16,),
        Text(
          posts[index].title,
          style: Theme.of(context).textTheme.title,
        ),
        Text(
          posts[index].author,
          style: Theme.of(context).textTheme.subhead,
        ),
        SizedBox(height: 16,)
      ],
    ),
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          splashColor: Colors.white.withOpacity(0.3), // 慢慢展开的颜色
          highlightColor: Colors.white.withOpacity(0.1), // 高亮颜色
          onTap: (){
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => PostShow(post: posts[index],)
              )
            );
          }
        ),
      ),
    )
  ],
)
预览

相关文章

网友评论

      本文标题:Flutter-溅墨效果(InkWell)

      本文链接:https://www.haomeiwen.com/subject/xuzboctx.html