我想使用浮動操作按鈕更改圖示顏色。如果我按下紅色按鈕，圖示會變成紅色。
代碼 ：
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton.extended(
icon: Icon(Icons.colorize),
label: Text('Red'),
backgroundColor: Colors.red,
),
uj5u.com熱心網友回復：
您可以這樣做（使用 StatefulWidget 小部件和 setState）：
class ChangeIconColor extends StatefulWidget {
@override
ChangeIconColorState createState() => ChangeIconColorState();
}
class ChangeIconColorState extends State<ChangeIconColor> {
Color selectedColor = Colors.blue;
changeColor(Color color){
setState(() {
selectedColor = color;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
FloatingActionButton.extended(
onPressed: () {
changeColor(Colors.red);
},
icon: Icon(Icons.colorize),
label: Text('Red'),
backgroundColor: Colors.red,
),
]),
body: Container(
child: Icon(
Icons.lock_clock,
color: selectedColor,
)),
);
}
}
如果你想使用 StatelessWidget，你可以像這樣使用 ValueNotifier：
class ChangeIconColorState extends StatelessWidget {
final ValueNotifier<Color> selectedColorNotifier = ValueNotifier(Colors.blue);
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
FloatingActionButton.extended(
onPressed: () {
selectedColorNotifier.value = Colors.red;
},
icon: Icon(Icons.colorize),
label: Text('Red'),
backgroundColor: Colors.red,
),
]),
body: Container(
child: ValueListenableBuilder(
builder: (context, Color color, child) {
return Icon(
Icons.lock_clock,
color: color,
);
},
valueListenable: selectedColorNotifier,
)),
);
}
}
uj5u.com熱心網友回復：
所以你首先要確保你當前的小部件是一個StatefulWidget，如果你不知道那是什么或者如何知道你的小部件是否是一個有狀態的小部件，你可能應該查看關于 flutter 的初學者教程。
現在，您需要為圖示的顏色宣告一個變數，并將該顏色傳遞給圖示：
Color iconColor = Colors.blue;
...
Icon(Icons.alarm, color: iconColor),
...
接下來，在您的浮動操作按鈕的按下方法上：
onPressed; () => setState(() => iconColor = Colors.red)), // whatever color you want here
該setState部分很重要，因為它告訴 flutter 使用新值重建小部件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/364086.html
上一篇：集團觀察員不顯示日志