Dart / Flutter 中未定义的变量

Question

我正在尝试编写小部件，以便我可以随时再次使用。因此，我为文本按钮创建了一个模板，当然我正在使用标题和函数的变量，它应该在按下时执行。这是我的代码：

import 'package:flutter/material.dart';

class CustomBoxButton extends StatefulWidget {
  final String title;
  final Function function;

  const CustomBoxButton(
      {super.key, required this.title, required this.function});

  @override
  State<CustomBoxButton> createState() => _CustomBoxButtonState();
}

class _CustomBoxButtonState extends State<CustomBoxButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 384.0,
      margin: const EdgeInsets.only(top: 24.0),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
      child: TextButton(
        onPressed: function,
        style: TextButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          backgroundColor: Colors.deepPurple,
          padding: const EdgeInsets.all(8),
        ),
        child: Text(
          title,
          style: const TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

现在我收到错误，我的变量“标题”和“函数”未定义。我不太明白，但我对 flutter 还很陌生。

谢谢您的帮助！

我已经尝试更改构造函数中的一些内容，但没有任何效果。还问了很多ChatGPT，但帮助不大。我搜索了 github 和 stackoverflow，并没有找到任何东西。

但我也不知道我应该寻找什么。

Answer 1

首先，您要定义小部件状态中的值：

class CustomBoxButton extends StatefulWidget {
  final String title;
  final Function function;

因此，要访问它，您可以添加前缀

widget

对于文字：

 child: Text(
      widget.title,

对于函数：

TextButton(
    onPressed: () => widget.function(),
    style: TextButton.styleFrom(

完整代码：

import 'package:flutter/material.dart';

class CustomBoxButton extends StatefulWidget {
  final String title;
  final Function function;

  const CustomBoxButton(
      {super.key, required this.title, required this.function});

  @override
  State<CustomBoxButton> createState() => _CustomBoxButtonState();
}

class _CustomBoxButtonState extends State<CustomBoxButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 384.0,
      margin: const EdgeInsets.only(top: 24.0),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
      child: TextButton(
        onPressed: () => widget.function(),
        style: TextButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          backgroundColor: Colors.deepPurple,
          padding: const EdgeInsets.all(8),
        ),
        child: Text(
          widget.title,
          style: const TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}