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

Question

所以我有一个可以正常工作的 appbar 小部件：

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 的最右侧包含一个带有回调的切换按钮，以便主体根据 switch 的值进行更改。我怎么能简单地做到这一点？我是否需要摆脱 appbar 并使用自定义容器？任何帮助都非常感谢！

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

Answer 1

您可以做的是使用放置在“脚手架”上方的回调。这是 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。在此示例中，我没有将 boolean 作为参数传递。

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