如何在Flutter上实现事件监听器或委托

14

我有一个主要的dart类,其中包含应用程序栏和刷新按钮。 我正在使用导航抽屉填充另外两个视图f1和f2。

从我的main.dart中,如何将刷新按钮点击传递给子片段(f1.dart),以便我可以刷新f1.dart上的内容。

// State of Main
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: new Column(
          children: <Widget>[

////////////////////////////////////////////////////////////
                new FirstFragment(),
                new SecondFragment()
/////////////////////////////////////////////////////////////
          ],
        ),
      ),
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              print("refresh pressed");
/////////////////////////
         How to send this refresh pressed event to my FirstFragment class??
/////////////////////////
            },
            color: Colors.white,
          )
        ],
      ),
      body: _getDrawerItemWidget(_selectedDrawerIndex),
    );
  }

}

在Android中,我一直在使用事件监听器,在iOS上,我可以使用委托来实现。那么在flutter/dart上如何实现呢?


你可以按照 https://dev59.com/PFUK5IYBdhLWcg3w_z20#67344918 中的描述使用 StreamController - ccpizza
1个回答

27

您可以传递回调函数,使用 VoidCallback 并在主部件上接收事件。

        class MainPage extends StatelessWidget {
          _onTapButton() {
            print("your event here");
          }

          @override
          Widget build(BuildContext context) {
            return Container(
              child: ChildPage(
                onTap: _onTapButton,
              ),
            );
          }
        }

        class ChildPage extends StatelessWidget {
          final VoidCallback onTap;

          const ChildPage({Key key, this.onTap}) : super(key: key);

          @override
          Widget build(BuildContext context) {
            return Container(
              child: RaisedButton(
                child: Text("Click Me"),
                onPressed: () {
                  //call to your callback  here
                  onTap();
                },
              ),
            );
          }
        } 

如果你想要相反的效果,你可以刷新父部件的状态并更改传递给片段的参数,或者你也可以使用GlobalKey,就像下面的例子:

        class MainPage extends StatelessWidget {

          final GlobalKey<ChildPageState> _key = GlobalKey();

          _onTapButton() {
            _key.currentState.myMethod();
          }

          @override
          Widget build(BuildContext context) {
            return Container(
              child: Column(
                children: [
                  ChildPage(
                    key: _key,
                  ),
                  RaisedButton(
                    child: Text("Click me"),
                    onPressed: _onTapButton,
                  )
                ],
              )
            );
          }
        }

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

          @override
          ChildPageState createState() {
            return new ChildPageState();
          }
        }

        class ChildPageState extends State<ChildPage> {

          myMethod(){
            print("called from parent");
          }

          @override
          Widget build(BuildContext context) {
            return Container(
              child: Text("Click Me"),
            );
          }
        }

1
我想做相反的事情。获取我的子元素上的事件。请查看带有示例代码的编辑后的问题。 - krishnakumarcn
1
@diegoveloper,我在第一个遇到了“NoSuchMethodError:The method 'call' was called on null”的错误。 - Muruganandham K
我建议您在pub.dev上使用event_bus库或基本的providers库。使用这个callback会花费很多时间来管理。 - Huy Tower

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接