在小部件之间访问/传递值

时间:2019-06-15 09:12:20

标签: flutter

我想知道什么是在小部件之间访问/传递变量的最佳方法。例如,

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  int number = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Jungle Book',
      home: new Scaffold(
        appBar: new AppBar(title: new Text('Jungle Book')),
        drawer: new AppMenu(),
        body: new MainPageManager(),
        floatingActionButton: new FloatingActionButton(onPressed: null,child: new Icon(Icons.shuffle),),
      ),
    );
  }
}

class MainPageManager extends StatefulWidget {
  @override
  _MainPageManagerState createState() => _MainPageManagerState();
}

class _MainPageManagerState extends State<MainPageManager> {
  List<String> keys = ["flamingo"];  // more to add later
  final _random = new Random();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: new Image.asset('images/'+keys[_random.nextInt(keys.length)]+'.jpg',
        fit: BoxFit.fill,)
    );
  }
}

如果我需要在floatActionButton.OnPressed期间将一个值传递给MainPageManager,那是最好的方法。

尝试做的是,当按下FloatingActionButton时,我需要用新图像更新MainPageManager。

我在某处读到,使用全局键不是一个好主意。有什么替代方案? PS:比较像个初学者。

1 个答案:

答案 0 :(得分:1)

Flutter对您如何进行状态管理没有看法。

由于MainPageManagerMyApp的直接子代,因此您可以将MyApp变成有状态的小部件,而将MainPageManager变成无状态的小部件,因为您没有使用setState MainPageManager中的方法。然后,在onPressed回调中,您将使用setState方法来设置MyApp组件的状态,这将导致flutter重建MyApp和所有子窗口小部件(因此MainPageManager也将被重建)。

最后要做的是向现在无状态的MainPageManager添加一个属性,该属性将传递给该组件。

示例:

class MainPageManager extends StatelessWidget {
  final String value;

  MainPageManager({this.value});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("$value"),
    );
  }
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _valueBinding;

  @override
  void initState() {
    _valueBinding = "Test";
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        MainPageManager(
          value: _valueBinding,
        ),
        MaterialButton(onPressed: () {
          setState(() {
            _valueBinding = "This will be shown in MainPageManager";
          });
        }, child: Text("Update Value"),)
      ],
    );
  }
}

用于更复杂的用例:

Flutter带有一个称为InheritedWidget的状态管理解决方案。但是,API并不那么方便,颤振团队实际上是在InheritedWidget的基础上使用a package called Provider进行推广。

如果您的应用程序变得很大,我实际上建议您改用BloC pattern