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

Question

所以我有一个工作正常的应用程序栏小部件：

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
(...)

然而，由于最近的开发，我想在应用栏的最右侧添加一个带有回调的开关按钮，以便主体根据开关的值进行更改。我怎样才能简单地做到这一点？我是否需要摆脱应用栏并使用自定义容器？强烈感谢任何帮助！

编辑：根据评论部分中的一些帮助（消失了？），我使用操作来添加按钮并使用回调。然而，主要问题是开关按钮是有状态的，我不知道如何将有状态小部件和 PreferredSize 结合起来......

Answer 1

您可以做的是使用放置在“脚手架”上方的回调。这是布尔状态将被更改的地方。

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 _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;
            });
          }),
    ]);
  }
}