一、ColorBlendMode概述

ColorBlendMode用于控制图片与颜色的混合效果。

混合模式类型

二、ColorFiltered使用

ColorFiltered(
  colorFilter: ColorFilter.mode(
    Colors.red,
    BlendMode.srcIn,
  ),
  child: Image.asset('assets/image.png'),
)

三、常用混合模式

srcIn

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
  child: Image.asset('assets/image.png'),
)

multiply

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.red, BlendMode.multiply),
  child: Image.asset('assets/image.png'),
)

overlay

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.green, BlendMode.overlay),
  child: Image.asset('assets/image.png'),
)

四、完整示例

class ImageBlendExample extends StatelessWidget {
  const ImageBlendExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('图片混合')),
      body: GridView.count(
        crossAxisCount: 2,
        padding: EdgeInsets.all(16),
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
        children: [
          _buildBlendCard('srcIn', Colors.blue, BlendMode.srcIn),
          _buildBlendCard('multiply', Colors.red, BlendMode.multiply),
          _buildBlendCard('screen', Colors.green, BlendMode.screen),
          _buildBlendCard('overlay', Colors.purple, BlendMode.overlay),
        ],
      ),
    );
  }

  Widget _buildBlendCard(String label, Color color, BlendMode mode) {
    return Card(
      child: Column(
        children: [
          Text(label, style: TextStyle(fontWeight: FontWeight.bold)),
          Expanded(
            child: ColorFiltered(
              colorFilter: ColorFilter.mode(color, mode),
              child: Container(
                color: Colors.grey.shade200,
                child: Icon(Icons.image, size: 64),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net