一个有状态小部件中的状态方法从另一个有状态小部件中调用-Flutter

一尘不染

一个有状态小部件中的状态方法从另一个有状态小部件中调用-Flutter

flutter

我正在开发一个扑朔迷离的项目，我无法将整个代码引起其超过500行的代码，因此我将尝试问我的问题，就像使用amp的icn一样简单。代码部分。

我有一个有状态的小部件，并且在扩展类下的该有状态的小部件内有一些功能 State<MusicPlayer>

文件 lib\main.dart

只需像一个简单的功能

class MyAppState extends State<MyApp>{
...
void printSample (){
  print("Sample text");
}
...

此函数位于主类内部的有状态小部件内。

还有另一个文件 lib\MyApplication.dart

这个文件也有一个有状态的小部件，我可以做点什么，以便我可以在printSample()这里调用该函数..

class MyApplicationState extends State<MyApplication>{
...
@override
  Widget build(BuildContext context) {
    return new FlatButton(
      child: new Text("Print Sample Text"),
      onPressed :(){
       // i want to cal the function here how is it possible to call the 
       // function 
       // printSample()  from here??  
      }
    );
  }
...
}

阅读 402

2020-08-13

共1个答案

一尘不染

要调用父函数，可以使用回调模式。在此示例中，函数（onColorSelected）传递给子级。当按下按钮时，孩子会调用该函数：

import 'package:flutter/material.dart';

class Parent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ParentState();
  }
}

class ParentState extends State<Parent> {
  Color selectedColor = Colors.grey;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          color: selectedColor,
          height: 200.0,
        ),
        ColorPicker(
          onColorSelect: (Color color) {
            setState(() {
              selectedColor = color;
            });
          },
        )
      ],
    );
  }
}

class ColorPicker extends StatelessWidget {
  const ColorPicker({this.onColorSelect});

  final ColorCallback onColorSelect;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        RaisedButton(
          child: Text('red'),
          color: Colors.red,
          onPressed: () {
            onColorSelect(Colors.red);
          },
        ),
        RaisedButton(
          child: Text('green'),
          color: Colors.green,
          onPressed: () {
            onColorSelect(Colors.green);
          },
        ),
        RaisedButton(
          child: Text('blue'),
          color: Colors.blue,
          onPressed: () {
            onColorSelect(Colors.blue);
          },
        )
      ],
    );
  }
}

typedef ColorCallback = void Function(Color color);

诸如按钮或表单字段之类的内部Flutter小部件使用完全相同的模式。如果只想调用不带任何参数的函数，则可以使用该VoidCallback类型来定义自己的回调类型。

如果要通知更高级别的父母，则可以在每个层次结构级别重复此模式：

class ColorPickerWrapper extends StatelessWidget {
  const ColorPickerWrapper({this.onColorSelect});

  final ColorCallback onColorSelect;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20.0),
      child: ColorPicker(onColorSelect: onColorSelect),
    )
  }
}

在Flutter中，不建议从父窗口小部件调用子窗口小部件的方法。相反，Flutter鼓励您将子代的状态作为构造函数参数传递下来。无需调用子方法，您只需调用setState父窗口小部件以更新其子方法。

一种替代的方法是controller在扑类（ScrollController，AnimationController，…）。这些也作为构造函数参数传递给子代，并且它们包含控制子代状态而不调用setState父代的方法。例：

scrollController.animateTo(200.0, duration: Duration(seconds: 1), curve: Curves.easeInOut);

然后要求孩子听这些更改以更新其内部状态。当然，您也可以实现自己的控制器类。如果需要，我建议您查看Flutter的源代码以了解其工作原理。

期货和流是传递状态的另一种选择，也可以用于调用子函数。

但是我真的不推荐。如果您需要调用子窗口小部件的方法，则很像您的应用程序体系结构存在缺陷。 尝试将状态提升到共同祖先！

2020-08-13