Flutter Bloc ， Bloc state ，導航？

Question

我現在面臨的是在我按照其中一個教程實施 bloc 之后，我現在被困在那里，在我得到響應並且狀態改變后，我想導航到另一個小部件

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(APP_TITLE),
        ),
        body: buildBody(context));
  }
}

BlocProvider<SignInBloc> buildBody(BuildContext context) {

  return BlocProvider(
    create: (_) => sl<SignInBloc>(),
    child: Center(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: <Widget>[
            BlocBuilder<SignInBloc, SignInState>(
                builder: (context, state) {
                  if(state is Empty)
                    return MessageDisplay(message: 'Sign In please.',);
                  else if(state is Loaded)
                    return HomePage();
                  else
                    return MessageDisplay(message: 'Sign In please.',);
                }
            ),
            SignInControls(),
          ],
        ),
      ),
    ),
  );
}

在加載狀態下，我想導航到另一個小部件。 那么如何實現這一目標，最好的方法是什么？

Answer 1

在構建小部件時，您不能使用導航器或更改狀態（您的情況）。 有兩種方式

1.老式的方式

WidgetsBinding.instance.addPostFrameCallback((_){
  // Your code goes here
});

2. 由於您已經實現了 BLOC 庫，因此您可以通過使用BlocListener以更優雅的方式實現這一點。 您可以在文檔中了解更多信息

希望我有所幫助！

Answer 2

導航可以像繼承的小部件一樣使用：

Navigator nav = Navigator.of(this.context);

那么你可以使用類似的東西：

nav.push(MaterialPageRoute(builder: (context) => YourSecondPage()))

在flutter中，您不能直接移動到某個頁面。 你應該使用路線。

我認為使用命名路由的最干凈方法。 這是一個例子：

// here you put a class of names to use later in all of your project.
class RouteNames{
    static String homepage = "/";
    static String otherPage= "/otherpage";
}
// in your main file , MyApp class
var routes = {
    RouteNames.homepage: (context)=> new MyHomePage(),
    RouteNames.otherPage: (context)=> new MyOtherPage()
};
// then use routes variable in your MaterialApp constructor 


// and later on in your project you can use this syntax: 
Navigator.of(context).pushNamed(RouteNames.otherPage);

我認為這種方式很干凈而且是集中的，如果你想向路由發送參數是很好的。

詳細了解導航：導航官方文檔很不錯

關於 Bloc 構建器和偵聽器的說明：

由於 BlocBuilder 將被多次調用。 它應該只包含小部件和小部件。 如果將導航代碼放入其中，則此代碼將被多次調用。

正如 Ayham Orfali 所說，您絕對應該為此使用 BlocListener。 在它里面你可以聽到狀態的變化。 這是一個例子

// some code
children: <Widget>[
            BlocListener(
                 bloc: BlocProvider.of<SignInBloc>(context),
                 listener: (context, state) {
                     if(state is Loaded){
                          Navigator.of(context).pushNamed("some other page");
                     }
                       // else do nothing!
                 }, 
                 child:// just bloc builder which contains widgets only.  ,
            SignInControls(),
          ]

// some other code