【问题标题】:How to update flutter widget using RxDart BehaviorSubject?如何使用 RxDart BehaviorSubject 更新颤振小部件?
【发布时间】:2019-05-05 19:51:25
【问题描述】:

我是 Flutter 和 dart 的新手,所以我创建了简单的计数器 Flutter 应用程序,在文章中进行了解释。

但是当主题添加值时流不更新小部件时。 谁能帮我找出问题。

我的主要小部件类

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: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  CounterBloc _counterBloc = new CounterBloc(initialCount: 0);
  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Counter(),
      floatingActionButton: FloatingActionButton(
        onPressed: _counterBloc.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

和计数器小部件

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  CounterBloc _counterBloc = new CounterBloc(initialCount: 1);
  @override
  void dispose() {
    _counterBloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _counterBloc.counterObservable,
      builder: (context, snapshot) => Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${snapshot.hasData}',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
    );
  }
}

这是我的集体课

class CounterBloc {
  int initialCount =
      1; //if the data is not passed by paramether it initializes with 0
  BehaviorSubject<int> _subjectCounter;

  CounterBloc({this.initialCount}) {
    _subjectCounter = new BehaviorSubject<int>.seeded(
        this.initialCount); //initializes the subject with element already
  }

  Observable<int> get counterObservable => _subjectCounter.stream;

  void increment() {
    initialCount++;
    print(initialCount);
    _subjectCounter.add(initialCount);
  }

  void decrement() {
    initialCount--;
    _subjectCounter.add(initialCount);
  }

  void dispose() {
    _subjectCounter.close();
  }
}

谁能帮我找出问题。

谢谢。

【问题讨论】:

    标签: dart flutter rxdart


    【解决方案1】:

    您在 MyHomePageCounter 类中使用了两个单独的 CounterBloc 实例。一个简单的解决方案是将MyHomePageCounterBloc 传递给Counter

    我的主页

    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    

    我的主页状态

    class _MyHomePageState extends State<MyHomePage> {
      CounterBloc _counterBloc = CounterBloc(initialCount: 0);
      @override
      Widget build(BuildContext context) {
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        return Scaffold(
          appBar: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text(widget.title),
          ),
          body: Counter(
            bloc: _counterBloc,
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _counterBloc.increment,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
    }
    

    计数器

    class Counter extends StatefulWidget {
      Counter({Key key, this.bloc}) : super(key: key);
    
      final CounterBloc bloc;
      @override
      _CounterState createState() => _CounterState();
    }
    

    CounterState

    class _CounterState extends State<Counter> {
      CounterBloc _counterBloc;
      @override
      void dispose() {
        _counterBloc.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        CounterBloc _counterBloc = widget.bloc;
        return StreamBuilder(
          stream: _counterBloc.counterObservable,
          builder: (context, snapshot) => Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${snapshot.data}',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
        );
      }
    }
    

    但从长远来看,与其将Bloc 作为参数显式传递,不如使用BlocProvider,它会将父类Bloc 的实例隐式分配给您的孩子。

    【讨论】:

    • 能否请您提供样品块提供者,一个简单的!并添加一些关于提供者的解释。
    • 这篇很棒的文章已经充分解释了didierboelens.com/2018/12/…
    • 谢谢!是的,这是一篇很棒的文章。
    猜你喜欢
    • 2021-10-02
    • 2020-09-07
    • 1970-01-01
    • 2020-07-23
    • 2020-05-30
    • 2019-07-22
    • 2019-09-14
    • 2021-01-18
    • 1970-01-01
    相关资源
    最近更新 更多