Question

我有一个根类RootPage，它是一个始终可见的StatefulWidget。我想更改body中受RootPage控制的RootPage's currentPage Widget中的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'), ); } }类和我制作的任何其他类吗？

示例代码

var button = $('button');

button.hover(
  function() {
    button.addClass('active');

    setTimeout(function() {
      button.removeClass('active');
    }, 3000);
  },
  function() {
    button.removeClass('active');
  }
);

我肯定有一个明显的答案，但是我似乎无法弄清楚如何有效地做到这一点，因此可以很容易地集成将来的类并使我的Root始终处于可见状态。

Answer 1

您可以使用回调函数实现此目的。请参考下面的代码。

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'),
    );
  }
}

这与problem非常相似，您可以在我的回答中提及第三点。

Answer 2

截图：

完整代码：

这是ParentPage：

class ParentPage extends StatefulWidget {
  @override
  _ParentPageState createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  int _count = 0;

  // Pass this method to the child page.
  void _update(int count) {
    setState(() => _count = count);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text('Value (in parent) = $_count'),
          ChildPage(update: _update),
        ],
      ),
    );
  }
}

这是ChildPage：

class ChildPage extends StatelessWidget {
  final ValueChanged<int> update;
  ChildPage({this.update});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () => update(1), // Passing value to the parent widget.
      child: Text('Update (in child)'),
    );
  }
}

Answer 3

我知道您需要针对特定代码的解决方案，但我建议您先看一下BloC模式，因为当您要将状态更改从窗口小部件传递到另一个尤其是多个页面时，建议使用这种方式

这个想法很简单，尽管实现起来有点“复杂”

Answer 4

实际上，最有效的方法是在flutter中使用BLoC包，并从小部件树的顶部实施它，以便所有继承的小部件都可以使用同一块。如果您以前使用过Android（就像Android体系结构组件一样），则需要将数据和状态管理与UI分开，因此您无需在UI中设置setState，而可以使用BLoC来管理状态。因此，您可以设置和访问相同的数据-从实现BLoC的顶部小部件继承的任何小部件中，对于更复杂的应用程序，它非常有用。

在这里可以找到软件包： https://pub.dev/packages/flutter_bloc#-readme-tab-

编写： https://www.didierboelens.com/2018/08/reactive-programming-streams-bloc/

YouTube上的精彩教程 https://www.youtube.com/watch?v=hTExlt1nJZI&list=PLB6lc7nQ1n4jCBkrirvVGr5b8rC95VAQ5&index=7

Answer 5

这是一个棘手的问题，但是我为这个问题找到了解决方案，因此我不得不多次面对这个问题。因此，让我们首先解决您的问题。这是您的代码的解决方案

首先让该文件保存为feedPage.dart名称。

mounted() {
    if (this.$attrs.type === 'textarea' && this.textareaAutoResized) {
        this.$refs.textarea.style.height = "auto";
        let newHeight = this.$refs.textarea.scrollHeight;
        this.$refs.textarea.style.height = `${newHeight}px`;
    }
},

然后将该文件导入您的主文件

...
watch: {
   vuexvalue(newVal) {
      if (newVal == 'XXXX')
        this.loadData()
      }
   }
},
computetd: {
   ...mapGetters(....,['vuexvalue'])
}

在扑朔迷离中，您不能在一个dart文件中编写多个有状态的小部件，而必须将其创建为小部件并在代码中使用它，因为setState是有状态的小部件的属性，我们已将此代码写在一个不同的文件中

问题解决了......：）

将setState摇动到另一个类？

5 个答案: