如何在Flutter ToggleButtons中使用图片？现有实现异常求助

问题描述 #

想要在ToggleButtons中实现带JPG图片的选项，尝试了以下代码：

const List<Widget> imgList = <Widget>[
  ImageIcon(AssetImage("lib/images/10x15.jpg"), size: 80),
  ImageIcon(AssetImage("lib/images/pk_sb.jpg"), size: 80),
  ImageIcon(AssetImage("lib/images/pk_sm.jpg"), size: 80),
];
...
       ToggleButtons(
                direction: vertical ? Axis.vertical : Axis.horizontal,
                onPressed: (int index) {
                  setState(() {
                    // 点击的按钮设为true，其余设为false
                    for (int i = 0; i < _selectedWeather.length; i++) {
                      _selectedWeather[i] = i == index;
                    }
                  });
                },
                borderRadius: const BorderRadius.all(Radius.circular(8)),
                selectedBorderColor: Colors.blue[700],
                selectedColor: Colors.white,
                fillColor: Colors.blue[200],
                color: Colors.blue[400],
                isSelected: _selectedWeather,
                children: imgList,
              ),
...

实际仅显示蓝色矩形，无法正常加载图片。

问题原因 #

ImageIcon组件的设计目的是显示图标字体（如Material Icons），而非普通的位图图片（JPG、PNG等）。用它加载JPG时，会把图片当作图标字体处理，导致无法正常渲染，最终显示为纯色矩形。

解决方案 #

直接使用Image.asset代替ImageIcon，就能正常显示JPG图片。同时可以根据需求调整图片的适配方式，确保在ToggleButtons中显示正常：

修改后的代码示例：

// 替换imgList为Image.asset组件
List<Widget> imgList = <Widget>[
  Image.asset(
    "lib/images/10x15.jpg",
    width: 80,
    height: 80,
    fit: BoxFit.cover, // 根据图片比例调整适配方式
  ),
  Image.asset(
    "lib/images/pk_sb.jpg",
    width: 80,
    height: 80,
    fit: BoxFit.cover,
  ),
  Image.asset(
    "lib/images/pk_sm.jpg",
    width: 80,
    height: 80,
    fit: BoxFit.cover,
  ),
];
...
ToggleButtons(
  direction: vertical ? Axis.vertical : Axis.horizontal,
  onPressed: (int index) {
    setState(() {
      for (int i = 0; i < _selectedWeather.length; i++) {
        _selectedWeather[i] = i == index;
      }
    });
  },
  borderRadius: const BorderRadius.all(Radius.circular(8)),
  selectedBorderColor: Colors.blue[700],
  fillColor: Colors.blue[200], // 选中时的背景色
  isSelected: _selectedWeather,
  children: imgList,
  // 可选：调整按钮内边距，让图片显示更合理
  padding: const EdgeInsets.all(8),
),
...

优化选中状态视觉效果 #

如果需要让选中的图片有更明显的区分，可以给选中状态的图片添加滤镜或透明度：

// 动态生成带选中状态的图片组件
List<Widget> buildToggleImages() {
  return List.generate(_selectedWeather.length, (index) {
    return Opacity(
      opacity: _selectedWeather[index] ? 0.7 : 1.0, // 选中时降低透明度
      child: ColorFiltered(
        colorFilter: _selectedWeather[index]
            ? ColorFilter.mode(Colors.blue[200]!, BlendMode.overlay) // 选中时添加蓝色遮罩
            : const ColorFilter.mode(Colors.transparent, BlendMode.saturation),
        child: Image.asset(
          "lib/images/${index == 0 ? '10x15' : index ==1 ? 'pk_sb' : 'pk_sm'}.jpg",
          width: 80,
          height: 80,
          fit: BoxFit.cover,
        ),
      ),
    );
  });
}

// 在ToggleButtons中使用
children: buildToggleImages(),

内容的提问来源于stack exchange，提问作者Sérgio Mordente