Flutter开发：HERE地图组件覆盖Material App界面问题咨询

问题原因 #

HERE地图Flutter插件默认采用原生视图渲染，原生视图的层级优先级高于Flutter自身渲染的Widget，导致Stack中的TextField、按钮等组件被地图覆盖。

解决方案 #

1. 开启HERE地图的纹理渲染 #

在HereMap组件中添加textureRenderingEnabled: true参数，将地图以Flutter纹理形式渲染，使其融入Flutter的Widget树层级，上层Widget即可正常显示：

Container(
  height: 90.w,
  width: 70.h,
  color: Colors.grey,
  child: HereMap(
    onMapCreated: _onMapCreated,
    textureRenderingEnabled: true, // 新增此参数
  ),
),

2. 确认Stack子组件顺序 #

确保地图组件是Stack的第一个子元素，其他需要显示在地图上层的Widget放在后面（Stack中后添加的子组件层级更高），你的现有代码已符合此要求，无需调整。

3. 可选：优化布局尺寸合理性 #

检查height:90.w、width:70.h这类尺寸设置，避免因容器过大导致的视觉覆盖。可根据需求调整为固定值或使用Expanded等适配布局的约束。

修改后的核心代码片段 #

Expanded(
  child: Stack(
    alignment: AlignmentDirectional.centerEnd,
    children: [
      // 地图组件（置于Stack最底层）
      Container(
        height: 90.w,
        width: 70.h,
        color: Colors.grey,
        child: HereMap(
          onMapCreated: _onMapCreated,
          textureRenderingEnabled: true,
        ),
      ),
      // 上层搜索栏与按钮
      logic.getCurrentCargoModel != null
          ? Container()
          : Padding(
              padding: EdgeInsets.all(2.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      // TextField代码...
                      // ElevatedButton代码...
                    ],
                  ),
                ],
              ),
            ),
      // 其他上层组件...
    ],
  ),
),

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