Flutter中的Image入门讲解

}) : assert(scale != null),
assert(alignment != null),
assert(repeat != null),
assert(matchTextDirection != null),
super(key: key);

其中image类型就是上边提到的ui.Image,这个数据的获取官方推荐通过ImageStream添加listener来获取。

• color和colorBlendMode

这两个属性可以做出许多的效果。

看一段简单的代码

class _MyHomePageState extends State {
ImageInfo info;//图片信息
List blendModes = BlendMode.values;//所有的混合模式转换为list

@override
void didChangeDependencies() {
super.didChangeDependencies();
Image.asset(“images/yuan.png”)
.image
.resolve(createLocalImageConfiguration(context))
.addListener((ImageInfo image, bool synchronousCall) {
setState(() {
info = image; //刷新状态
});
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.builder(
itemCount: blendModes.length - 1,
padding: EdgeInsets.only(top: 10.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
itemBuilder: getItemBuilder,
),
);
}

Widget getItemBuilder(BuildContext context, int index) {
return Column(
children: [
RawImage(
image: info?.image,
color: Colors.red,
width: 40,
height: 40,
colorBlendMode: blendModes[index + 1],
fit: BoxFit.cover,
),
Container(
padding: EdgeInsets.only(top: 10.0),
child: Text(
blendModes[index + 1].toString().split(“.”)[1],
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
),
),
),
],
);
}
}

flutter中的混合模式是枚举类型，和Android中的图片混合模式画笔混合模式基本保持一致。上面的代码描述了所有的混合模式并配有图，除了clear没有在里边（clear模式会清除所有内容）。image是一个简单的图片，带透明通道的绿色的圆，在图中就是dst模式下的样子，背景是一个纯红色，在图中就是src模式下的样子。