Flutter中如何根据可选void函数控制按钮显示？

问题根源分析 #

• 函数类型声明错误：Login类中showCreateAccountBtn的Function(void)?类型定义不对，它表示“接受一个void类型参数的函数”，但实际需要的是无参数、返回值为void的函数，正确类型应该是void Function()?或者Flutter提供的VoidCallback?（VoidCallback是void Function()的别名）。
• 错误传递函数引用：在_FirstScreenState的build方法中，showCreateAccountBtn: _onCreateAccountTapped()加了括号，会立即执行_onCreateAccountTapped函数，而非传递函数本身。再加上该函数返回null，导致showCreateAccountBtn始终为null，按钮永远不会显示。
• 按钮点击事件未正确执行函数：TextButton的onPressed写了() => widget.showCreateAccountBtn，这只是返回函数对象，没有实际调用它，点击按钮不会触发任何操作。

修正后的完整代码 #

import 'package:flutter/material.dart';

class Login extends StatefulWidget {
  // 使用正确的无参void函数类型
  final VoidCallback? showCreateAccountBtn;
  const Login({
    Key? key,
    this.showCreateAccountBtn,
  }) : super(key: key);

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("First Screen")),
      body: Column(children: [
        widget.showCreateAccountBtn != null
            ? TextButton(
                style: ButtonStyle(
                    foregroundColor:
                        MaterialStateProperty.all<Color>(Colors.blue)),
                // 直接传递函数引用，匹配onPressed的类型要求
                onPressed: widget.showCreateAccountBtn,
                child: const Text('Create an account'))
            : const SizedBox()
      ]),
    );
  }
}

class FirstScreen extends StatefulWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  State<FirstScreen> createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    // 传递函数引用，不要加括号执行函数
    return Login(showCreateAccountBtn: _onCreateAccountTapped);
  }

  // 定义正确的无参void函数
  void _onCreateAccountTapped() {
    print("Click on Create Acc");
    // 这里可以添加实际的页面跳转或业务逻辑
  }
}

关键修正说明 #

• 类型修正：将Function(void)?改为VoidCallback?，明确参数为无参void函数，匹配Flutter按钮点击事件的类型要求。
• 传递函数引用：去掉_onCreateAccountTapped后的括号，传递函数本身而非执行后的返回值（原返回值为null）。
• 点击事件修正：直接将widget.showCreateAccountBtn赋值给onPressed，因为VoidCallback完全匹配onPressed的类型；如果需要添加额外逻辑，也可以写() => widget.showCreateAccountBtn!()（已通过null判断，使用!是安全的）。

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