如何使用 BlocBuilder() 导航 - Flutter

Question

我正在使用 Bloc 模式构建我的 Flutter 应用程序，但有一个问题：

使用 BlocBuilder()，按下我的按钮后，我无法从 A 页面正确导航到 B 页面，它将推送到 B 页面并永远循环。

使用 BlocListener()，我可以在第一次按下我的按钮时导航，不能在其他按下时再次导航。

如何正确导航？

我的代码：

class PageA extends StatelessWidget {
  Movies movie;
  double scale;
  MovieBLoc _movieBLoc;
  MovieItem({@required this.movie, this.scale});
  BuildContext context;

  @override
  Widget build(BuildContext context) {
    _movieBLoc = MovieBLoc();
    this.context = context;
    return BlocProvider<MovieBLoc>(
      create: (context) => _movieBLoc,
      child: BlocBuilder<MovieBLoc, MovieState>(
        builder: (context, movieState) {
          if (movieState is MovieNavigation) _onGoingToDetail();
          return _itemPageView(scale, movie);
        },
      ),
    );
  }

  Widget _itemPageView(double scale, Movies movie) {
    return LayoutBuilder(
      builder: (context, constraint) {
        return Align(
          alignment: FractionalOffset.center,
          child: Stack(
            children: <Widget>[
              _movieBackground(constraint, scale, movie),
              _filter(constraint, scale),
              _movieInfo(constraint, scale, movie),
            ],
          ),
        );
      },
    );
  }

  Widget _movieInfo(BoxConstraints constraint, double scale, Movies movie) {
    return Container(
      width: double.infinity,
      height: ((constraint.maxHeight / 100) * 65) / scale,
      margin: EdgeInsets.only(left: 15, right: 15),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              /* ... code ... */
              Expanded(
                  flex: 2,
                  child: Container(
                    margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                    child: RaisedButton(
                      // CLick on my button and navigate to page B
                      onPressed: () {
                        _movieBLoc.add(MoviePressed(movie: movie));
                      },
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(Radius.circular(15))),
                      color: Colors.orange,
                      child: FittedBox(
                        fit: BoxFit.cover,
                        child: Text(
                          AppString.bookButtonValue,
                          style: TextStyle(
                              color: AppTheme.onSurface, fontSize: 20),
                        ),
                      ),
                    ),
                  ))
            ],
          )
        ],
      ),
    );
  }

  _onGoingToDetail() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Navigator.of(context).pushNamed(RounterNames.pageB,
          arguments: MovieDetailArgs(movie: movie));
    });
  }

  /* ... code ... */
}

Answer 1

Bloc 包有不同收据的文档。

https://bloclibrary.dev/#/recipesflutternavigation?id=recipes-navigation

您肯定需要使用 BlocListener。 另外请注意将 Equitable 用于您的事件和状态。

因为如果当前状态是“NavigateState”并且您再次发送“NavigationState”的新实例，则下一个状态可能相同并且可以被忽略