导航到新页面时防止颤动块状态更改

Question

我是使用 flutter_bloc 的新手，目前在我的项目中遇到问题。

所以，我有这样的 bloc 类：

class TestBloc extends Bloc<TestEvent, TestState> {
  @override
  TestState get initialState => InitialTestState();

  @override
  Stream<TestState> mapEventToState(
    TestEvent event,
  ) async* {
    if (event is StateOneEvent) {
      yield StateOne("one");
    } else if (event is StateTwoEvent) {
      yield StateTwo("two");
    }
  }
}

/// === Event class
abstract class TestEvent extends Equatable {
  const TestEvent();
}

class StateOneEvent extends TestEvent {
  @override
  List<Object> get props => [];
}

class StateTwoEvent extends TestEvent {
  @override
  List<Object> get props => [];
}


// == State class
abstract class TestState extends Equatable {
  const TestState();
}

class InitialTestState extends TestState {
  @override
  List<Object> get props => [];
}

class StateOne extends TestState {
  final String value;

  StateOne(this.value);

  @override
  List<Object> get props => [value];
}

class StateTwo extends TestState {
  final String value;

  StateTwo(this.value);

  @override
  List<Object> get props => [value];
}

这是我的主要功能：

void main() {
  runApp(
    MultiBlocProvider(
      providers: [
        BlocProvider(create: (context) {
          return TestBloc();
        }),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second_page': (context) => SecondPage(),
      },
    );
  }
}

所以在这里我有两个页面，FirstPage 和 SecondPage 就像这里一样。每个此类都将显示该集团的当前状态。

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  void initState() {
    super.initState();
    BlocProvider.of<TestBloc>(context).add(StateOneEvent());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: BlocBuilder<TestBloc, TestState>(
      builder: (_, state) {
        String value = '-';
        if (state is StateOne) {
          value = state.value;
        } else if (state is StateTwo) {
          value = state.value;
        }
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(value),
              RaisedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/second_page');
                },
                child: Text('Goto Second Page'),
              )
            ],
          ),
        );
      },
    ));
  }
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  void initState() {
    super.initState();
    BlocProvider.of<TestBloc>(context).add(StateTwoEvent());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: BlocBuilder<TestBloc, TestState>(
      builder: (_, state) {
        String value = '-';
        if (state is StateOne) {
          value = state.value;
        } else if (state is StateTwo) {
          value = state.value;
        }
        return Center(
          child: Text(value),
        );
      },
    ));
  }
}

它们都使用相同的 bloc (TestBloc)。在 FirstPage 的初始状态中，我尝试将事件分派给 TestBloc 以将当前状态更改为 StateOne 并在文本中显示当前状态值。所以对于 FirstPage，它将显示 one。

之后，我尝试导航到与 FirstPage 几乎相同的 SecondPage。在 SecondPage 的初始状态下，我尝试将事件发送到 TestBloc 以将当前状态更改为 StateTwo，因此它将在文本中显示 two。

但问题是当我从 SecondPage 导航.pop 或按下返回按钮时，FirstPage 内的文本变为 two。当我导航到新页面时，似乎 TestBloc 流没有关闭。

我的期望是 FirstPage 应该仍处于显示 one 的最后状态 并且不受我在 SecondPage 中所做的事情的影响。

如何解决这个问题？

谢谢

---

[更新]

我尝试像这里一样更改 SecondPage，以便它具有另一个 bloc 范围。这实际上解决了问题，但这似乎是正确和好的解决方案？

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  TestBloc testBloc = TestBloc();
  @override
  void initState() {
    super.initState();
    testBloc.add(StateTwoEvent());
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => testBloc,
      child: Scaffold(body: BlocBuilder<TestBloc, TestState>(
        builder: (_, state) {
          String value = '-';
          if (state is StateOne) {
            value = state.value;
          } else if (state is StateTwo) {
            value = state.value;
          }
          return Center(
            child: Text(value),
          );
        },
      )),
    );
  }
}

Answer 1

很难说你到底想达到什么目标。

如果您希望两个页面能够在同一数据上具有不同的状态，则可以为每个页面使用不同的 Bloc 实例。

如果您希望两个页面具有相同的 Bloc 但对状态的反应不同，您可以使用 BlocBuilder 的 buildWhen 方法来控制构建器何时必须重新构建 UI。第一页示例：

BlocBuilder<TestBloc, TestState>(
    buildWhen: (prevState, curState) {
        return curState is StateOne
    }
    builder: (_, state) {
        String value = state.value;
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(value),
              RaisedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/second_page');
                },
                child: Text('Goto Second Page'),
             )
           ],
        ),
     );
},

但我认为在您的情况下，您希望拥有同一个 Bloc 的单独实例。 buildWhen 主要用于当您只想在需要在 UI 中反映的部分状态更改时重建。

Answer 2

您应该创建新的 StateInProgress 那么你的集团应该喜欢

if (event is StateOneEvent) {
  yield StateInProgress();
  //action call
  yield StateOne("one");
} else if (event is StateTwoEvent) {
  yield StateInProgress();
  //action call
  yield StateTwo("two");
}