颤振:单击时如何更新按钮中的文本

Question

当我点击时，我想改变ElevatedButton内的文本。例如，"Fav"到"Unfav"，当我做这个动作时，按钮的颜色也会改变。我尝试了布尔值，也改变了setState块内按钮的文本，它没有帮助。

演示我想改变什么

我尝试执行此操作的代码

ElevatedButton(
child: Text(title),
onPressed: () async {
String ref = ads.reference.id;
String? favuid = user != null
? user?.uid
: googleUser?.id;
if (favuid != null) {
setState(() {
title = 'UnFav';
if ((ads.data() as dynamic)['isfav$favuid'] == null || !(ads.data() as dynamic)['isfav$favuid']) {
collectionads.doc(ref).update({
'isfav$favuid': true
});
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(
duration: Duration(seconds: 2),
content: Text("Add to Favourite list"),
));
}
else {
title = 'Fav';
collectionads.doc(ref).update({
'isfav$favuid': false
});
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(
duration: Duration(seconds: 2),
content: Text(
"Deleted from Favourite list"),
));
}
});
setState(() {
!(ads.data() as dynamic)['isfav$favuid'] == (ads.data() as dynamic)['isfav$favuid'];
});
}
},

)

Answer 1

bool fav = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
if(fav)
setState(() => fav=false);
else
setState(() => fav=true);
},
child: Text(fav ? 'Fav' : 'Unfav'),
style: ElevatedButton.styleFrom(
primary: fav? Colors.blue : Colors.black12,
),
),
),
);
}

Answer 2

title变量需要成为StatefulWidget状态类的一部分，然后setState将更改文本

class MyWidget extends StatefulWidget {
const MyWidget({ Key? key }) : super(key: key);
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
String title = 'Fav';
@override
Widget build(BuildContext context) {
return Container(
child: ElevatedButton(onPressed: () {
setState(() {
title = 'UnFav';
});
}, child: Text(title))
);
}
}

Answer 3

这可以通过单个bool变量的组合来实现和setState将按钮状态从isFav设置为!isFav。现在你可以改变方法setState中的任何内容就像我们改变text一样颜色和.

@anderson48试试下面的代码，这样最容易实现你想要的，尝试在dartpad

中运行此代码

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isFav = true;
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold( appBar: new AppBar(
title: Text("Sample"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
isFav
? MaterialButton(
child: Text("button 1" , style: TextStyle(
color: Colors.red,
fontSize: 32)), // fav
onPressed: () {
setState(() {
isFav = !isFav;
});
},
)
: Container(),
!(isFav)
? MaterialButton(
child: Text("Button 2" , style: TextStyle(
color: Colors.blue,
fontSize: 50)),  // not fav
onPressed: () {
setState(() {
isFav = !isFav;
});
},
)
: Container(),
],
)));
}
}

Answer 4

setState()将不能在flutter新版本的build()中工作。

在类中描述函数，你可以在这个函数中编写所有的代码。

void yourFunction(){
setState(() {
isFav = !isFav;
});
}

之后

onPressed: yourFunction,