gpt4 book ai didi

Flutter:如何在应用栏小部件中包含切换按钮?

转载 作者:行者123 更新时间:2023-12-03 04:42:28 24 4
gpt4 key购买 nike

所以我有一个可以正常工作的应用栏小部件:

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com