Flutter中如何实现容器根据图片可用性切换显示内容的逻辑

以下针对你提出的三个场景，给出具体实现代码，核心是通过条件判断控制组件显示逻辑，你可根据实际需求替换isImageAvailable的判断逻辑（比如判断本地图片是否存在、网络图片是否加载成功等）。

场景1：图片可用时仅显示文本 #

当图片可用状态为真时，容器只展示文本；若图片不可用，可自定义展示内容（如下示例显示占位文本）：

bool isImageAvailable = true; // 模拟图片可用状态

Container(
  padding: EdgeInsets.all(16),
  color: Colors.grey[200],
  child: isImageAvailable
      ? Text("仅显示的文本内容", style: TextStyle(fontSize: 16))
      : Text("图片不可用时的占位文本"),
);

场景2：图片可用时同时显示文本与图片 #

图片可用时，将图片与文本通过Row/Column组合展示；不可用时可仅显示文本：

bool isImageAvailable = true; // 模拟图片可用状态

Container(
  padding: EdgeInsets.all(16),
  color: Colors.grey[200],
  child: isImageAvailable
      ? Row(
          children: [
            Image.asset("assets/your_image.png", width: 40, height: 40), // 替换为你的图片路径
            SizedBox(width: 12),
            Text("同时显示的文本内容", style: TextStyle(fontSize: 16)),
          ],
        )
      : Text("图片不可用时仅显示文本"),
);

场景3：图片可用时仅显示图片 #

图片可用时容器展示图片，不可用时展示文本或其他占位内容：

bool isImageAvailable = true; // 模拟图片可用状态

Container(
  padding: EdgeInsets.all(16),
  color: Colors.grey[200],
  child: isImageAvailable
      ? Image.asset("assets/your_image.png", width: 100, height: 100) // 替换为你的图片路径
      : Text("图片不可用时的占位文本"),
);

实际项目中的图片可用性判断 #

如果是网络图片，可通过Image.network的errorBuilder回调判断加载是否成功；如果是本地图片，可通过rootBundle检查文件是否存在，示例如下：

// 检查本地图片是否存在
Future<bool> checkLocalImageExists(String path) async {
  try {
    await rootBundle.load(path);
    return true;
  } catch (_) {
    return false;
  }
}

你可以在initState中调用该方法，更新isImageAvailable状态，实现动态显示逻辑。

内容的提问来源于stack exchange，提问作者Olasoji Oluwadamilola