web-dev-qa-db-ja.com

別のクラスにsetStateをフラッターしますか?

私は常に表示されているRootPageであるルートクラスStatefulWidgetを持っています。 RootPage's currentPage Widgetによって制御されるbody内のRootPageを、FeedPageクラスや他のクラスなど、さまざまなクラスから変更したいですか?

コード例

import 'package:flutter/material.Dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => new _RootPageState();
}
class _RootPageState extends State<RootPage> {
  FeedPage feedPage;

  Widget currentPage;

  @override
  void initState() {
    super.initState();
    feedPage = FeedPage();

    currentPage = feedPage;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      //Current page to be changed from other classes too?
      body: currentPage
    );
  }
}



class FeedPage extends StatefulWidget {
  @override
  _feedPageState createState() => new _feedPageState();
}
class _feedPageState extends State<FeedPage> {

  @override
  Widget build(BuildContext context) {
    return new FlatButton(
      onPressed: () {
        setState(() {
          //change the currentPage in RootPage so it switches FeedPage away and gets a new class that I'll make
        });
      },
      child: new Text('Go to a new page but keep root, just replace this feed part'),
    );
  }
}

明白な答えがあると確信していますが、それを効率的に行う方法を理解できないので、将来のクラスを統合し、ルートを常に表示しておくのは簡単です。

14
Jayden

callbacks functionsを使用してこれを実現できます。以下のコードを参照してください。

import 'package:flutter/material.Dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => new _RootPageState();
}
class _RootPageState extends State<RootPage> {
  FeedPage feedPage;

  Widget currentPage;

  @override
  void initState() {
    super.initState();
    feedPage = FeedPage(this.callback);

    currentPage = feedPage;
  }

  void callback(Widget nextPage) {
    setState(() {
      this.currentPage = nextPage;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      //Current page to be changed from other classes too?
        body: currentPage
    );
  }
}



class FeedPage extends StatefulWidget {
  Function callback;

  FeedPage(this.callback);

  @override
  _feedPageState createState() => new _feedPageState();
}
class _feedPageState extends State<FeedPage> {

  @override
  Widget build(BuildContext context) {
    return new FlatButton(
      onPressed: () {
        this.widget.callback(new NextPage());
//        setState(() {
//          //change the currentPage in RootPage so it switches FeedPage away and gets a new class that I'll make
//        });
      },
      child: new Text('Go to a new page but keep root, just replace this feed part'),
    );
  }
}

これはこれに非常に似ています 問題 と私の答えの3番目のポイントを参照できます。

特定のコードの解決策が必要であることはわかっていますが、BloCパターンを調べることをお勧めします。これは、ウィジェットから状態変更を別の特に複数のページに渡す場合に推奨されるアプローチであるためです。

アイデアは単純ですが、実装は「少し」複雑です

0
Saed Nabil