如何在flutter中的onPressed()函数上获取小部件的文本值

Question

我创建了一个自定义小部件来在我的应用程序中显示标签/主题标签。

help_form.dart

TagButton(
    name: "Electricity",
    onPressed: () {}),
TagButton(
    name: "DIY",
    onPressed: () {}),
TagButton(
    name: "Programming",
    onPressed: () {}),

但是我想知道按下的标签的文本，以便我可以检测用户选择了哪些标签。目前，我已经成功地更改了所选标签的颜色，但我不确定如何以编程方式将其保存在 help_form.dart 中，以便我可以将其发送到数据库。

这里是TagButton.dart：

class TagButton extends StatefulWidget {
  final String name;
  final void Function()? onPressed;

  TagButton({super.key, required this.name, required this.onPressed});

  @override
  State<TagButton> createState() => _TagButtonState();
}

class _TagButtonState extends State<TagButton> {
  bool chosenTag = false;

  @override
  Widget build(BuildContext context) {
    return TextButton(
        style: ButtonStyle(
            backgroundColor: WidgetStatePropertyAll(
                chosenTag == true ? CustomColors.secondaryColor : Colors.grey)),
        onPressed: () {
          print("Chosen tag is: ${chosenTag.toString()}");
          print("Pressed ${widget.name}");
          setState(() {
            // widget.onPressed;
            chosenTag == false ? chosenTag = true : chosenTag = false;
          });
          print("Chosen tag is: ${chosenTag.toString()}");
        },
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.tag,
              color: Colors.white,
            ),
            Text(widget.name, style: TextStyle(color: Colors.white)),
          ],
        ));
  }
}

有什么想法吗？

Answer 1

您可以在TagButton的父级中获取用户选择的标签，您可以根据您提供的代码在这里找到示例代码：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var selectedTags = <String>[];

  void updateSelectedTags(String tag) {
    if (selectedTags.contains(tag)) {
      setState(() {
        selectedTags.remove(tag);
      });
    } else {
      setState(() {
        selectedTags.add(tag);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    print("Selected tags: $selectedTags");
    return Scaffold(
      body: Column(
        children: [
          TagButton(name: "Electricity", onPressed: () => updateSelectedTags("Electricity")),
          TagButton(name: "DIY", onPressed: () => updateSelectedTags("DIY")),
          TagButton(name: "Programming", onPressed: () => updateSelectedTags("Programming")),
        ],
      ),
    );
  }
}

此外，您还需要在

onPress

中调用

TagButton

参数，如下代码所示：

class TagButton extends StatefulWidget {
  final String name;
  final void Function()? onPressed;

  TagButton({super.key, required this.name, required this.onPressed});

  @override
  State<TagButton> createState() => _TagButtonState();
}

class _TagButtonState extends State<TagButton> {
  bool chosenTag = false;

  @override
  Widget build(BuildContext context) {
    return TextButton(
        style: ButtonStyle(backgroundColor: WidgetStatePropertyAll(chosenTag == true ? Colors.amber : Colors.grey)),
        onPressed: () {
          print("Chosen tag is: ${chosenTag.toString()}");
          print("Pressed ${widget.name}");
          setState(() {
            chosenTag == false ? chosenTag = true : chosenTag = false;
          });
          print("Chosen tag is: ${chosenTag.toString()}");
          // add onPress parameter here to invoke the function
          if (widget.onPressed != null) {
            widget.onPressed!();
          }
        },
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.tag,
              color: Colors.white,
            ),
            Text(widget.name, style: TextStyle(color: Colors.white)),
          ],
        ));
  }
}

如果您期望更多，请随时添加评论。