Flutter地图应用无法实现横向滚动动态ListView问题求解

你的代码存在几个核心问题导致列表无法正常显示，直接按以下步骤修改即可：

问题排查 #

1. listWidget1函数中只声明了Centres centre但没有实例化，是空对象，访问属性直接报错，列表自然无法渲染
2. _boxes组件内部又调用了listWidget1()，属于递归嵌套调用，会造成逻辑死循环
3. Stack布局中的列表组件没有指定位置和尺寸，默认铺满全屏和地图层重叠，就算渲染成功也看不到
4. 当前Centres类的entries字段存的是A/B/C字符串，不是有效的图片URL，图片加载也会失败

修复代码 #

第一步：在State中管理Centres实例，方便后续接口更新数据 #

class _MapState extends State<Map> {
  /* 原有代码全部保留 */
  Centres centre = Centres(); // 新增这行，实例化数据类

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          myLayoutWidget(),
          _createForm(context),
          listWidget1(), // 保留列表调用
        ],
      ),
    );
  }
}

第二步：修复listWidget1组件，增加定位和横向滑动配置 #

// 把listWidget1移到_MapState类内部
Widget listWidget1() {
  return Align(
    alignment: Alignment.bottomLeft,
    child: Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 150.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal, // 横向滑动，和你之前硬编码效果一致
        padding: const EdgeInsets.all(8),
        itemCount: centre.entries.length,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: _boxes(
              // 这里先替换成测试图片链接，后续接口返回数据后再动态替换
              "https://lh5.googleusercontent.com/p/AF1QipO3VPL9m-b355xWeg4MXmOQTauFAEkavSluTtJU=w225-h160-k-no",
              centre.latitudes[index],
              centre.longitudes[index],
              centre.centres[index],
            ),
          );
        },
      ),
    ),
  );
}

第三步：修复_boxes组件的死循环问题，右侧替换为地点详情 #

先把你注释掉的myDetailsContainer1函数恢复，再修改_boxes的内容：

Widget _boxes(String _image, double lat, double long, String restaurantName) {
  return GestureDetector(
    onTap: () {
      // 可选功能：点击列表项后地图跳转到对应坐标
      LatLng target = LatLng(lat, long);
      newGoogleMapController.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(target: target, zoom: 15)));
    },
    child: Container(
      child: new FittedBox(
        child: Material(
            color: Colors.white,
            elevation: 14.0,
            borderRadius: BorderRadius.circular(24.0),
            shadowColor: Color(0x802196F3),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  width: 180,
                  height: 200,
                  child: ClipRRect(
                    borderRadius: new BorderRadius.circular(24.0),
                    child: Image(
                      fit: BoxFit.fill,
                      image: NetworkImage(_image),
                    ),
                  ),
                ),
                Container(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: myDetailsContainer1(restaurantName), // 替换为详情组件，不要再调用listWidget1
                  ),
                ),
              ],
            )),
      ),
    ),
  );
}

后续对接服务端数据的方案 #

后续从接口拿到数据后，只需要更新centre变量的内容，调用setState即可自动刷新列表，不需要修改列表渲染逻辑：

// 示例接口请求逻辑，放到_MapState类中
void fetchCentresFromServer() async {
  // 调用你的HTTP接口请求数据
  var response = await http.get(Uri.parse("你的服务端接口地址"));
  // 解析response数据为Centres实例
  setState(() {
    centre = 解析完成的Centres实例;
  });
}

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