Flutter中点击图片ModelViewer模型不更新问题求助

核心问题分析 #

1. 切换逻辑单一：你的changeModelUrl方法不管点击哪个图片，都把_modelUrl固定设为model2.glb，这首先导致所有点击只会切换到同一个模型，逻辑有误。
2. ModelViewer未响应状态变化：这类基于WebView封装的3D组件，很多时候不会自动监听src参数的变化——即使你调用了setState更新了_modelUrl，组件内部的Web视图也不会主动刷新加载新模型。

分步解决方案 #

1. 修复模型切换逻辑

修改changeModelUrl方法，让它能接收不同的模型URL参数，实现不同图片对应不同模型：

void changeModelUrl(String newUrl) {
  setState(() {
    _modelUrl = newUrl;
  });
}

然后在每个GestureDetector的onTap回调中传入对应URL：

// 第一个图片的点击事件
onTap: () {
  print("tapmasque");
  changeModelUrl("assets/models/model1.glb");
},
// 第二个图片的点击事件
onTap: () {
  print("tapradio");
  changeModelUrl("assets/models/model2.glb");
},
// 第三个图片的点击事件
onTap: () {
  print("tapdodo");
  changeModelUrl("assets/models/model3.glb");
},

2. 强制ModelViewer组件重建

给ModelViewer组件添加一个与_modelUrl绑定的Key，当_modelUrl变化时，Flutter会销毁旧组件并创建新组件，从而强制加载新模型：

Expanded(
  child: ModelViewer(
    key: ValueKey(_modelUrl), // 添加这一行触发组件重建
    id: "oeuvres3D",
    src: _modelUrl,
    skyboxImage: "https://i.ibb.co/2gy0xVv/Shutterstock-1157860666.jpg",
    exposure: 3,
    ar: true,
    arModes: ['scene-viewer', 'webxr', 'quick-look'],
    autoRotate: true,
    cameraControls: true,
    disableZoom: true,
    relatedJs: js,
    innerModelViewerHtml: _html2,
    overwriteNodeValidatorBuilder: myNodeValidatorBuilder,
  ),
),

3. 额外验证点

• 确保pubspec.yaml中已正确声明assets资源路径：

assets:
  - assets/models/
  - assets/poster/

• 若使用的是第三方封装的model-viewer库，确认版本支持参数更新，必要时升级到最新稳定版。

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