flutter - 如何知道在 Flutter 的嵌套小部件中发生了弹出事件

Question

我目前正在构建应用程序，我需要使用嵌套路由来保持一个屏幕相同并在不同的屏幕上路由。我想当第二条路线被弹出时，我可以改变扩展的值来填满整个屏幕。Github 中的要点。这是代码示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: MyHomePage()),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> with RouteAware {
  bool rightPanelIsShown;
  Widget child;
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey();
  final RouteObserver<PageRoute> _routeObserver = RouteObserver<PageRoute>();

  @override
  void initState() {
    super.initState();
    setState(() {
      rightPanelIsShown = false;
      child = Container();
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _routeObserver.subscribe(this, ModalRoute.of(context));
    setState(() {
      child = Container();
    });
  }

  @override
  void didPop() {
    super.didPop();
    print('popped');
    setState(() {
      rightPanelIsShown = false;
    });
  }

  @override
  void dispose() {
    print("dis");
    _routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Center(
              child: FlatButton(
                color: Colors.blue,
                onPressed: () => setState(() {
                  rightPanelIsShown = !rightPanelIsShown;
                  child = Page1();
                }),
                child: Text(
                  'Open Right Panel',
                  style: TextStyle(color: Colors.white, fontSize: 25.0),
                ),
              ),
            ),
          ),
          rightPanelIsShown
              ? Expanded(
                  flex: 1,
                  child: Navigator(
                    onGenerateRoute: (route) => MaterialPageRoute(
                      builder: (context) => child,
                    ),
                  ),
                )
              : Container(),
        ],
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page1',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildGoToButton(context),
          _buildBackbutton(context)
        ],
      ),
    );
  }

  FlatButton _buildGoToButton(BuildContext context) {
    return FlatButton(
      color: Colors.green,
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => Page2(),
          ),
        );
      },
      child: Text(
        'Go To Page 2',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }

  FlatButton _buildBackbutton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page2',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildBackButton(context)
        ],
      ),
    );
  }

  FlatButton _buildBackButton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

内置的截屏

当单击右侧面板 Page1 上的关闭时，它还应该更改父级的状态。谢谢，

更新

在 João Soares 的帮助下工作

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: MyHomePage()),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> with RouteAware {
  bool rightPanelIsShown;
  Widget child;
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey();
  final RouteObserver<PageRoute> _routeObserver = RouteObserver<PageRoute>();

  @override
  void initState() {
    super.initState();
    setState(() {
      rightPanelIsShown = false;
      child = Container();
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _routeObserver.subscribe(this, ModalRoute.of(context));
    setState(() {
      child = Container();
    });
  }

  @override
  void didPop() {
    super.didPop();
    print('popped');
    setState(() {
      rightPanelIsShown = false;
    });
  }

  @override
  void dispose() {
    print("dis");
    _routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Center(
              child: Column(
                children: <Widget>[
                  FlatButton(
                    color: Colors.blue,
                    onPressed: () => setState(() {
                      rightPanelIsShown = !rightPanelIsShown;
                      child = Page1(
                        callback: onPop,
                      );
                    }),
                    child: Text(
                      'Open Right Panel 1',
                      style: TextStyle(color: Colors.white, fontSize: 25.0),
                    ),
                  ),
                  FlatButton(
                    color: Colors.blue,
                    onPressed: () => setState(() {
                      rightPanelIsShown = !rightPanelIsShown;
                      child = Page3(
                        callback: onPop,
                      );
                    }),
                    child: Text(
                      'Open Right Panel 2',
                      style: TextStyle(color: Colors.white, fontSize: 25.0),
                    ),
                  ),
                ],
              ),
            ),
          ),
          rightPanelIsShown
              ? Expanded(
                  flex: 1,
                  child: PanelView(
                    child: child,
                  ),
                )
              : Container(),
        ],
      ),
    );
  }

  onPop(value) {
    print("popped");
    setState(() {
      rightPanelIsShown = false;
    });
  }
}

class PanelView extends StatefulWidget {
  final Widget child;

  PanelView({Key key, this.child}) : super(key: key);

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

class _PanelViewState extends State<PanelView> {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      onGenerateRoute: (route) {
        return MaterialPageRoute(builder: (context) {
          return Container(
            child: widget.child,
          );
        });
      },
    );
  }
}

class Page1 extends StatelessWidget {
  final Function callback;
  const Page1({Key key, this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page1',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildGoToButton(context),
          _buildBackbutton(context)
        ],
      ),
    );
  }

  FlatButton _buildGoToButton(BuildContext context) {
    return FlatButton(
      color: Colors.green,
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => Page2(),
          ),
        );
      },
      child: Text(
        'Go To Page 2',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }

  FlatButton _buildBackbutton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        callback('hello');
        Navigator.of(context).pop();
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page2',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildBakButton(context)
        ],
      ),
    );
  }

  FlatButton _buildBakButton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

class Page3 extends StatelessWidget {
  final Function callback;
  const Page3({Key key, this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page2',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildBakButton(context)
        ],
      ),
    );
  }

  FlatButton _buildBakButton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        callback('page3');
        Navigator.pop(context);
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

如果有更好的解决方案，我不必将回调传递给 PanelView 的每个子小部件，例如左侧面板中有 2 个按钮，并且它确定哪个小部件将显示在右侧面板中，其中按钮子确定子小部件将其设置为状态。

score 0 · Accepted Answer

如果您在同一个类中编写所有代码，则只需从 Navigator 中的主类调用一个函数：

小部件

Navigator(
  onGenerateRoute: (route) => MaterialPageRoute(
    builder: (context) {
      return Container(
        color: Colors.orange,
        child: RaisedButton(
          child: Text('Close panel'),
          onPressed: () {
            panelClosed("I'm sending data back");
            Navigator.of(context).pop();
          }
        )
      );
    }
  ),
),

方法

void panelClosed(data){
  print("Panel closed");
  setState(() {
    message = data;
  });
}

相反，如果您希望 Navigator 在一个单独的类中，那么您只需将要从父类调用的函数传递给子类，如下所示：

父类中的小部件

Expanded(
  flex: 1,
  child: PanelView(callBack: panelClosed,)
)

方法

void panelClosed(data){
  print("Panel closed");
  setState(() {
    message = data;
  });
}

带导航器的班级

class PanelView extends StatefulWidget {
  final Function callBack;

  PanelView({this.callBack});

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

class _PanelViewState extends State<PanelView> {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      onGenerateRoute: (route) {
        return MaterialPageRoute(
          builder: (context) {
            return Container(
              color: Colors.orange,
              child: Column(
                children: <Widget>[
                  Text('panel 2'),
                  RaisedButton(
                    child: Text('Close'),
                    onPressed: () {
                      widget.callBack('send any data here');
                      Navigator.of(context).pop();
                    }
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }
}

flutter - 如何知道在 Flutter 的嵌套小部件中发生了弹出事件

更新

1 回答 1

Related

Reference