如何在 flutter appBar 中构建 Stateful "Action Icons"
How to build Stateful "Action Icons" in flutter appBar
我是 Flutter 的新手,在为 Android 个应用程序创建 appBar 时遇到了问题。
appBar的操作区域应该有一个“相机手电筒”图标的按钮,用户可以点击这个图标从弹出菜单中选择手电筒选项(on/off/auto),我完成了这一步。
但是如果我想让appBar操作区的手电筒图标随着用户选择的变化而变化(比如用户选择auto,那么appBar的图标应该显示一个“自动手电筒”),我该怎么办实现了吗?
在此先感谢您。
我曾尝试在 appBar 操作图标小部件中使用“if”,但失败了。
现在我在 appBar.dart 中的代码是
`Icon flashIcon = Icon(Icons.flash_auto);
FlashMode flashstate;
setIcon([Icon Function() param0]) {
if (flashstate == FlashMode.off) {
setIcon(() => flashIcon = Icon(Icons.flash_off));
} else if (flashstate == FlashMode.torch) {
flashIcon = Icon(Icons.flash_on);
} else if (flashstate == FlashMode.always) {
flashIcon = Icon(Icons.flash_on);
} else {
flashIcon = Icon(Icons.flash_auto);
}
}`
Action按钮代码为:`
PopupMenuButton<String>(
icon: setIcon(),
onSelected: widget.isFlash,
itemBuilder: (context) {
List<PopupMenuEntry<String>> menuEntries2 = [
const PopupMenuItem<String>(
child: Icon(
Icons.flash_auto,
color: Colors.black,
),
value: 'auto',
),
const PopupMenuItem<String>(
child: Icon(Icons.flash_off, color: Colors.black),
value: 'off',
),
const PopupMenuItem<String>(
child: Icon(Icons.flash_on, color: Colors.black),
value: 'torch',
),
];
return menuEntries2;
},
),`
但是问题还是没有解决...图标变成了三个点,在弹出的菜单中选择手电筒状态,没有任何变化。
enter image description here
enter image description here
由于您还没有发布任何代码,这是我的建议。你可以这样写代码:
Icon icon = Icon(Icons./*icon name*/);
然后创建如下函数:
setIcon() {
//here you use the value of your popup(or whatever you are using to let the user choose the state of flash) to change icon
//example
if(value == **condition**) {
setState(() => icon = /*new icon*/);
} else {...} //and so on for all conditions
//or use a switch case if you prefer
}
现在您在弹出窗口(或其他)的回调中调用该函数,并在您的 appBar 按钮中使用变量 icon
。
尝试下面的代码,你得到了你描述的确切输出
输出:-
代码:-
import 'package:flutter/material.dart';
class OptionMenuExample extends StatefulWidget {
const OptionMenuExample({Key? key}) : super(key: key);
@override
State<OptionMenuExample> createState() => _OptionMenuExampleState();
}
class _OptionMenuExampleState extends State<OptionMenuExample> {
int selectedValue = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Appbar"),
actions: [
PopupMenuButton(
initialValue: selectedValue,
onSelected: (int value) => setState(() {
selectedValue = value;
}),
child: Icon(
selectedValue == 1
? Icons.flash_off
: selectedValue == 2
? Icons.flash_auto
: Icons.flash_on,
color: Colors.black),
itemBuilder: (context) => const [
PopupMenuItem(
child: Icon(Icons.flash_on, color: Colors.black),
value: 0,
),
PopupMenuItem(
child: Icon(Icons.flash_off, color: Colors.black),
value: 1,
),
PopupMenuItem(
child: Icon(Icons.flash_auto, color: Colors.black),
value: 2,
),
],
),
const SizedBox(width: 16.0)
],
),
);
}
}
我是 Flutter 的新手,在为 Android 个应用程序创建 appBar 时遇到了问题。 appBar的操作区域应该有一个“相机手电筒”图标的按钮,用户可以点击这个图标从弹出菜单中选择手电筒选项(on/off/auto),我完成了这一步。
但是如果我想让appBar操作区的手电筒图标随着用户选择的变化而变化(比如用户选择auto,那么appBar的图标应该显示一个“自动手电筒”),我该怎么办实现了吗?
在此先感谢您。
我曾尝试在 appBar 操作图标小部件中使用“if”,但失败了。
现在我在 appBar.dart 中的代码是
`Icon flashIcon = Icon(Icons.flash_auto);
FlashMode flashstate;
setIcon([Icon Function() param0]) {
if (flashstate == FlashMode.off) {
setIcon(() => flashIcon = Icon(Icons.flash_off));
} else if (flashstate == FlashMode.torch) {
flashIcon = Icon(Icons.flash_on);
} else if (flashstate == FlashMode.always) {
flashIcon = Icon(Icons.flash_on);
} else {
flashIcon = Icon(Icons.flash_auto);
}
}`
Action按钮代码为:`
PopupMenuButton<String>(
icon: setIcon(),
onSelected: widget.isFlash,
itemBuilder: (context) {
List<PopupMenuEntry<String>> menuEntries2 = [
const PopupMenuItem<String>(
child: Icon(
Icons.flash_auto,
color: Colors.black,
),
value: 'auto',
),
const PopupMenuItem<String>(
child: Icon(Icons.flash_off, color: Colors.black),
value: 'off',
),
const PopupMenuItem<String>(
child: Icon(Icons.flash_on, color: Colors.black),
value: 'torch',
),
];
return menuEntries2;
},
),`
但是问题还是没有解决...图标变成了三个点,在弹出的菜单中选择手电筒状态,没有任何变化。 enter image description here
enter image description here
由于您还没有发布任何代码,这是我的建议。你可以这样写代码:
Icon icon = Icon(Icons./*icon name*/);
然后创建如下函数:
setIcon() {
//here you use the value of your popup(or whatever you are using to let the user choose the state of flash) to change icon
//example
if(value == **condition**) {
setState(() => icon = /*new icon*/);
} else {...} //and so on for all conditions
//or use a switch case if you prefer
}
现在您在弹出窗口(或其他)的回调中调用该函数,并在您的 appBar 按钮中使用变量 icon
。
尝试下面的代码,你得到了你描述的确切输出
输出:-
代码:-
import 'package:flutter/material.dart';
class OptionMenuExample extends StatefulWidget {
const OptionMenuExample({Key? key}) : super(key: key);
@override
State<OptionMenuExample> createState() => _OptionMenuExampleState();
}
class _OptionMenuExampleState extends State<OptionMenuExample> {
int selectedValue = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Appbar"),
actions: [
PopupMenuButton(
initialValue: selectedValue,
onSelected: (int value) => setState(() {
selectedValue = value;
}),
child: Icon(
selectedValue == 1
? Icons.flash_off
: selectedValue == 2
? Icons.flash_auto
: Icons.flash_on,
color: Colors.black),
itemBuilder: (context) => const [
PopupMenuItem(
child: Icon(Icons.flash_on, color: Colors.black),
value: 0,
),
PopupMenuItem(
child: Icon(Icons.flash_off, color: Colors.black),
value: 1,
),
PopupMenuItem(
child: Icon(Icons.flash_auto, color: Colors.black),
value: 2,
),
],
),
const SizedBox(width: 16.0)
],
),
);
}
}