1

我正在尝试在 OverlayEntry 中显示一些小部件，例如 CheckBox 或 Switch。叠加层是在点击事件中构建的。问题是 bool _value 仅在我第一次点击覆盖层内的 CheckBox 时更新，但 CheckBox 不会更新其状态。奇怪的是（仅第一次点击）点击更新了覆盖层外的复选框，而不是覆盖层内的复选框。我在这里错过了什么？

下面是一个完整的片段来重现这一点。

谢谢你的时间！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _value = true;

  _buildOverlay() {
    OverlayEntry _overlayEntry;
    OverlayState _overlayState = Overlay.of(context);

    _overlayEntry = OverlayEntry(
      builder: (BuildContext context) {
        return Stack(
          children: <Widget>[
            Material(
              child: Container(
                padding: EdgeInsets.all(100),
                color: Colors.lightBlue,
                child: Checkbox(
                  value: _value,
                  onChanged: (bool value) { print("$value  $_value"); setState(() => _value = value); },
                ),
              ),
            ),
          ],
        );
      },
    );

    _overlayState.insert(_overlayEntry);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                FloatingActionButton(
                  onPressed: () {_buildOverlay();},
                  child: Icon(Icons.add),
                ),
                Checkbox(
                  value: _value,
                  onChanged: (bool value) { print("$value  $_value"); setState(() => _value = value); },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

更新：

除了 anmol.majhail 解决方案，使用ValueListenableBuilder可能是另一种解决方案，而无需执行 StatefulWidget。

的声明_value变为： var _value = ValueNotifier<bool>(false);

这里是 _buildOverlay() 函数中的 _overlayEntry：

_overlayEntry = OverlayEntry(
      builder: (BuildContext context) {
        return Material(
          child: Container(
            padding: EdgeInsets.all(100),
            color: Colors.lightBlue,
            child: ValueListenableBuilder<bool>(
              valueListenable: _value,
              builder: (context, value, child) {
                return Checkbox(
                    value: _value.value,
                    onChanged: (bool value) { 
                      print("$value  $_value"); 
                      setState(() => _value.value = value); 
                    },
                  );
              },
            ),
          ),
        );
      },
    );
4

1 回答 1

1

这里的问题是Overlay entry有不同的上下文。为了使其工作，您需要将 分隔overlay entry在一个单独的stateful小部件中 - 通过它您可以管理checkbox状态。

工作代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _value = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                FloatingActionButton(
                  onPressed: () {
                    OverlayState _overlayState = Overlay.of(context);
                    _overlayState.insert(OverlayEntry(
                      builder: (BuildContext context) {
                        return OverlayClass(
                          val: _value,
                        );
                      },
                    ));
                    // _buildOverlay(context);
                  },
                  child: Icon(Icons.add),
                ),
                Checkbox(
                  value: _value,
                  onChanged: (bool value) {
                    print("$value  $_value");
                    setState(() => _value = value);
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class OverlayClass extends StatefulWidget {
  final bool val;

  OverlayClass({this.val});

  @override
  _OverlayClassState createState() => _OverlayClassState();
}

class _OverlayClassState extends State<OverlayClass> {
  bool _value;
  @override
  void initState() {
    super.initState();
    _value = widget.val;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Material(
          child: Container(
            padding: EdgeInsets.all(100),
            color: Colors.lightBlue,
            child: Checkbox(
              value: _value,
              onChanged: (bool value) {
                print("$value  $_value");
                setState(() => _value = value);
              },
            ),
          ),
        ),
      ],
    );
  }
}
于 2019-03-28T05:11:09.190 回答