Flutter中GridTile中图像上方的InkVell波纹
我认为这是在图像上显示波纹效果的更好方法。
Ink.image( image: AssetImage('sample.jpg'), fit: BoxFit.cover, child: InkWell( onTap: () {}, ), ), 复制代码
使用Stack，我们可以将Material和InkWell带到图像上。要拉伸材质，我们将使用Positioned.fill小部件。
Stack( children: <Widget>[ Image( ... ), Positioned.fill( child: Material( color: Colors.transparent, child: InkWell( onTap: () { ... }, ), ), ), ], ); 复制代码
我们创建了这个简单的小部件，以在任何给定孩子的上方绘制墨水反应。
class InkWrapper extends StatelessWidget { final Color splashColor; final Widget child; final VoidCallback onTap; InkWrapper({ this.splashColor, @required this.child, @required this.onTap, }); @override Widget build(BuildContext context) { return Stack( children: <Widget>[ child, Positioned.fill( child: Material( color: Colors.transparent, child: InkWell( splashColor: splashColor, onTap: onTap, ), ), ), ], ); } } 复制代码
- 优秀的方法。即使在AspectRatio下也可以使用。如果可以使用FadeInImage会更好。
SizedBox( height: 200, child: Ink( decoration: BoxDecoration( image: DecorationImage( image: ExactAssetImage("chocolate_image"), fit: BoxFit.cover, ), ), child: InkWell( onTap: () {}, splashColor: Colors.brown.withOpacity(0.5), ), ), ) 复制代码
Material( child : InkWell( child : YourWidget ) ) 复制代码
flutter analyse
配置步骤
- 在项目更目录添加
analysis_options.yaml文件可以配置lint规则和analyzer行为 - 具体支持的lint规则参考dart-lang.github.io/linter/lint…
- 目前有3类已经定义的常用规则
Many lints are included in various predefined rulesets:
- pedantic for rules enforced internally at Google
- effective_dart for rules corresponding to the Effective Dart style guide
- flutter for rules used in
flutter analyze
- 推荐使用google团队内部的规则库pedantic
- 在yaml里面添加依赖
pedantic: ^1.8.0+1
- 在
analysis_options.yaml里面引入使用
include: package:pedantic/analysis_options.1.8.0.yaml
使用
配置好analysis_options.yaml文件的规则后,执行flutter analyse命令将对你整个项目或者package的代码进行静态分析
修复
- 根据提示修复
点击提示的规则，就会跳转到需要修复位置，按照lint规则的说明和例子就可以修正了。
网络异常，图片无法展示
|
- 利用VSCode快速修复
在提示有问题的代码的地方Ctrl +., 就会自动弹出快速修复，比如图中为增加const标识。 是不是快多了。
网络异常，图片无法展示
|
网络异常，图片无法展示
|
参考配置
当然你还可以根据你的需要定制自己的静态分析规则，下面是最近使用的一套配置，仅供你参考：
