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

但是由于最近的开发，我想在应用栏的最右侧包含一个带有回调的切换按钮，以便主体根据切换的值进行更改。我怎么能简单地做到这一点？我是否需要摆脱 appbar 并使用自定义容器？非常感谢任何帮助！

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

Answer 1

您可以使用位于 'Scaffold' 上方的回调。这是布尔状态将被改变的地方。

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

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

Flutter: How to include switch button in appbar widget?

callback

dart

flutter

选项 2