我创建了一个自定义小部件来在我的应用程序中显示标签/主题标签。
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)),
],
));
}
}
有什么想法吗?
您可以在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)),
],
));
}
}
如果您期望更多,请随时添加评论。