Flutter开发：如何实现RaisedButton的onPressed触发后打开Form表单

核心逻辑非常直接：在RaisedButton的onPressed回调中，根据你期望的Form展示形式，调用对应的展示触发方法即可，常见的实现方案有三类：

方案1：模态弹层内嵌Form（适合短表单快速填写场景） #

通过showModalBottomSheet或showDialog弹出浮层，把Form组件嵌套在浮层内展示，不需要跳转页面，交互更轻量：

RaisedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true, // 允许浮层跟随键盘调整高度，避免内容溢出
      builder: (context) {
        // 适配键盘弹出的遮挡问题
        return Padding(
          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom
          ),
          child: YourCustomForm(), // 自定义的Form表单组件
        );
      },
    );
  },
  child: const Text('打开评论表单'),
)

方案2：路由跳转独立页面展示Form（适合字段较多的长表单场景） #

通过Navigator.push跳转到独立路由页，在独立页面中承载Form组件，适合需要长时间填写、功能较复杂的表单：

RaisedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => FormEditPage(), // 独立的Form编辑页面
      ),
    );
  },
  child: const Text('打开个人信息编辑表单'),
)

方案3：同页面状态切换显示Form（适合表单嵌在当前页面内容流内的场景） #

通过状态变量控制Form的显隐，onPressed回调中调用setState更新状态值，触发UI刷新展示Form：

// 页面类中定义状态变量
bool _isFormVisible = false;

RaisedButton(
  onPressed: () {
    setState(() {
      _isFormVisible = true; // 切换状态为显示Form
    });
  },
  child: const Text('展开登记表单'),
)

// 同页面的组件树中根据状态判断是否渲染Form
if (_isFormVisible) YourCustomForm(),

常见注意事项 #

• *提示：RaisedButton在Flutter 2.0之后已被废弃，可直接替换为兼容交互逻辑的ElevatedButton，不需要修改onPressed内的实现代码
• Form组件需要绑定全局唯一的GlobalKey<FormState>才能实现表单校验、取值、保存等功能，该Key需要定义在组件State类层面，不能写在build方法内部
• 使用弹层承载Form时，必须处理键盘弹出的高度适配，否则会出现输入框被键盘遮挡的问题

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