Flutter点击Marker信息窗按钮无法显示表单Widget的问题排查

问题描述 #

我是Flutter初学者，正在通过教程与编码实践学习开发。我制作了一款谷歌地图应用，可在地图上添加Marker，添加后会显示包含信息的pillInfoWindow组件。该组件中的按钮本应弹出可填充编辑的表单组件，但点击按钮后仅执行了打印语句，表单组件未显示，甚至未出现在组件树中，现寻求解决方法，实现点击按钮立即显示表单的需求。

问题根源 #

1. 变量作用域错误：getPillInfowindow函数内部定义了独立的_saveForm变量，和首页中的_saveForm不是同一个对象，赋值操作无法影响首页的状态。
2. 未触发组件重建：即使变量作用域正确，直接赋值后没有调用setState()，Flutter无法感知状态变化，不会更新组件树。

解决方案 #

步骤1：将表单状态交由首页管理，通过回调传递点击事件 #

修改首页中getPillInfowindow的调用，传入一个回调函数，让按钮点击时通知首页更新状态。

步骤2：修改getPillInfowindow函数，移除局部状态变量 #

删除getPillInfowindow内部的_saveForm变量，改用传入的回调函数处理点击事件。

步骤3：在首页的回调中调用setState()更新表单状态 #

点击按钮时，在回调内触发setState()，赋值_saveForm并触发页面重建。

修改后的代码示例 #

首页代码修改部分 #

// 首页的状态变量保留
Widget? _pillInfoWindow;
Widget? _saveForm;
        
@override
void initState() {
  super.initState();
  _pillInfoWindow = null;
  _saveForm = null;
}

// 修改addMarker中的_pillInfoWindow赋值
setState(() {
  _markers.clear();
  _markers.add(Marker(
    markerId: MarkerId((mTitle + "_" + _markers.length.toString()).toString()),
    position: mLatLng,
    infoWindow: InfoWindow(
      title: mTitle,
      snippet: mDescription,
    ),
    icon: BitmapDescriptor.fromBytes(markerIcon),
  ));

  _pillInfoWindow = getPillInfowindow(
    mLatLng, 
    mTitle, 
    mDescription,
    onSavePressed: () { // 添加回调函数
      setState(() {
        _saveForm = getSaveForm();
      });
    }
  );
});

// 修改_handleTap中的赋值
if (words.isSuccessful()) {
  addMarker(mLatLng, mTitle, mDescription);
  _pillInfoWindow = getPillInfowindow(
    mLatLng, 
    mTitle, 
    mDescription,
    onSavePressed: () {
      setState(() {
        _saveForm = getSaveForm();
      });
    }
  );
}

getPillInfowindow函数修改 #

import 'package:flutter/material.dart';
import 'package:mymapp/widgets/get_save_form.dart';

// 移除局部的_saveForm变量
Widget getPillInfowindow(
  mLatLng, 
  mTitle, 
  mDescription,
  required VoidCallback onSavePressed, // 添加回调参数
) {
  return Positioned(
    bottom: 100, right: 0, left: 0,
    child: Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        margin: EdgeInsets.all(20),
        height: 100,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(50)),
            boxShadow: <BoxShadow>[
              BoxShadow(
                  blurRadius: 20,
                  offset: Offset.zero,
                  color: Colors.grey.withOpacity(0.5))
            ]),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
                margin: EdgeInsets.only(left: 10),
                width: 50,
                height: 50,
                child: ClipOval(
                    child: Image.asset('assets/images/icons/pin2.png',
                        fit: BoxFit.cover))),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(left: 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('title:${mTitle}',
                        style: TextStyle(color: Colors.green)),
                    Text('Desc: ${mDescription}',
                        style: TextStyle(fontSize: 12, color: Colors.grey)),
                  ],
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(15),
              child: IconButton(
                onPressed: onSavePressed, // 调用传入的回调
                icon: Image.asset('assets/images/icons/save.png'),
                iconSize: 40,
              )
            )
          ],
        ),
      ),
    ),
  );
}

表单组件代码（无需修改） #

import 'package:flutter/material.dart';

Widget getSaveForm() {
  print('button clicked');

  return Positioned(
    top: 100,
    right: 10,
    left: 10,
    child: Align(
      alignment: Alignment.center,
      child: Container(
        margin: EdgeInsets.all(20),
        height: 250,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(20)),
            boxShadow: <BoxShadow>[
              BoxShadow(
                  blurRadius: 20,
                  offset: Offset.zero,
                  color: Colors.grey.withOpacity(0.5))
            ]),
        child: Form(
            child: Column(
          children: [
            TextFormField(
              decoration: const InputDecoration(
                icon: const Icon(Icons.person),
                hintText: 'Enter your name',
                labelText: 'Name',
              ),
            ),
            TextFormField(
              decoration: const InputDecoration(
                icon: const Icon(Icons.person),
                hintText: 'Enter your name',
                labelText: 'Name',
              ),
            ),
            Container(
                padding: const EdgeInsets.only(left: 15.0, top: 40.0),
                child: ElevatedButton(
                  child: const Text('Submit'),
                  onPressed: null,
                )),
          ],
        )),
      ),
    ),
  );
}

额外优化建议 #

• 可以给_saveForm添加关闭逻辑，比如在表单外点击时设置_saveForm = null并调用setState()。
• 考虑使用StatefulWidget封装表单组件，方便后续处理表单数据的保存逻辑。

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