所以我有一个可以正常工作的应用栏小部件:
typedef void BoolCallback(bool val);
class MyAppBar extends PreferredSize {
final int opacity;
final String title;
MyAppBar(this.opacity, [this.title]);
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
@override
Widget build(BuildContext context) {
return AppBar(
title: Text(title != null ? title : ''),
backgroundColor: Colors.white,
centerTitle: true,
leading: Container(
color: Color(0x00ffffff), child: IconButton(
icon: Icon(Icons.lightbulb_outline),
iconSize: 120,
onPressed: () {},
)),
actions: [
Switch(value: true, onChanged: (val){
callback(val);}),
],
flexibleSpace: Container(
decoration: myBoxDecoration(opacity)
),
);
}
}
调用自:
bool _isOn = true;
(...)
Scaffold(
appBar: MyAppBar((val) => _isOn = val, 0xff, 'dummy title'),
body: _isOn ? Widget1 : Widget2
(...)
但是由于最近的开发,我想在应用栏的最右侧包含一个带有回调的开关按钮,以便主体根据开关的值进行更改。我怎么能简单地做到这一点?我是否需要摆脱 appbar 并使用自定义容器?非常感谢任何帮助!
编辑:根据评论部分的一些帮助(消失了?)我使用操作来添加按钮并使用回调。然而,主要问题是切换按钮是有状态的,我不知道如何将有状态的小部件和 PreferredSize 结合起来......
最佳答案
您可以做的是使用放置在“脚手架”上方的回调。这是 bool 的状态将被改变的地方。
bool _isOn = true;
void toggle() {
setState(() => _isOn = !_isOn);
}
Scaffold(
appBar: MyAppBar(toggle: toggle, isOn: _isOn),
body: _isOn ? Widget1() : Widget2()
);
那么appBar实际所在的位置:
class MyAppBar extends PreferredSize {
final Function toggle;
final bool isOn;
MyAppBar({this.toggle, this.isOn});
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
@override
Widget build(BuildContext context) {
return AppBar(centerTitle: true, title: Text("TITLE"), actions: [
Switch(
value: isOn,
onChanged: (val) {
toggle();
}),
]);
}
}
选项 2
这几乎是一回事,我只是想让你知道,如果你愿意,你可以将它扩展到一个StatefulWidget。在此示例中,我没有将 bool 值 作为参数传递。
bool _isOn = true;
void toggle() {
setState(() => _isOn = !_isOn);
}
Scaffold(
appBar: MyAppBar(toggle: toggle),
body: _isOn ? Widget1() : Widget2()
);
那么appBar实际所在的位置:
class MyAppBar extends StatefulWidget implements PreferredSizeWidget {
final Function toggle;
MyAppBar({this.toggle});
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
@override
_MyAppBar createState() => _MyAppBar();
}
class _MyAppBar extends State<MyAppBar> {
bool isOn = true;
@override
Widget build(BuildContext context) {
return AppBar(centerTitle: true, title: Text("TITLE"), actions: [
Switch(
value: isOn,
onChanged: (val) {
widget.toggle();
setState(() {
isOn = val;
});
}),
]);
}
}
关于Flutter:如何在应用栏小部件中包含切换按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62961322/