StatelessWidget中showModalBottomSheet无法弹出问题求助

问题根源 #

你的代码存在两个关键问题：

• ElevatedButton的onPressed属性中直接执行了onPressFunction()，导致构建底部模态框的瞬间就触发了图片选择逻辑，而非等待用户点击模态框内的按钮。
• 使用Function作为回调类型不够严谨，Flutter提供了更贴合无参无返回场景的VoidCallback类型。

修正后的代码 #

PopModalBottomSheet组件

class PopModalBottomSheet extends StatelessWidget {
  const PopModalBottomSheet({super.key, required this.onPressFunction});

  // 改用更严谨的VoidCallback类型定义回调
  final VoidCallback onPressFunction;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => bottomModalSheet(context),
      child: const Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [Icon(Icons.image), Text("Tap the Image Icon to Select Image(s)")],
      ),
    );
  }

  void bottomModalSheet(BuildContext context) {
    showModalBottomSheet<void>(
      isDismissible: false,
      isScrollControlled: true,
      backgroundColor: Colors.white,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)),
      ),
      context: context,
      builder: (BuildContext context) {
        return SizedBox(
          height: 35.h,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const Text('Click the button to select images in your gallery.'),
                // 传递函数引用而非立即执行，确保点击按钮时才触发逻辑
                ElevatedButton(onPressed: onPressFunction, child: const Text('Select Image')),
              ],
            ),
          ),
        );
      },
    );
  }
}

调用代码（无需修改）

class MyPage1 extends StatefulWidget {
  const MyPage1({super.key});

  @override
  State<MyPage1> createState() => _MyPage1State();
}

class _MyPage1State extends State<MyPage1> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [PopModalBottomSheet(onPressFunction: () {
        // 此处编写图片选择逻辑
      })],
    );
  }
}

修复说明 #

• 移除onPressed中的括号：将onPressFunction()改为onPressFunction，确保仅在用户点击按钮时才执行图片选择逻辑。
• 替换回调类型：用VoidCallback替代Function，让代码类型更安全、可读性更强，符合Flutter的最佳实践。

内容的提问来源于stack exchange，提问作者jpg.hue