如何在Flutter中实现多级回调?

时间:2019-05-20 11:23:57

标签: android dart flutter

我想实现从有状态小部件到另一个有状态小部件的回调。 (孩子到父母)。层次结构是Task(包含)-> ItemBought-> addImage

我该如何实施?回调函数还会在有状态窗口小部件或其状态中定义吗?

这是我当前的代码:

Task.dart

import 'package:flutter/material.dart';
import 'package:flutter_convertor/ItemBought.dart';

class task extends StatelessWidget{
  @override
 ...
}

class taskScreen extends StatefulWidget{
  @override
  taskState createState() => new taskState();
}

class taskState extends State<taskScreen> {
 bool isButtonEnabled = false;

//Callback function i want to call in order to change the state of my Button
 formReady(){
   setState(() {
     isButtonEnabled = !isButtonEnabled ;
   });
 }
  @override
  Widget build(BuildContext context) {
    Column taskScreen = Column(
        children: <Widget>[...
                      ItemBought(), //ITEMBOUGHT WIDGET
                    ...
          Column(
            children: <Widget>[     
              FlatButton(             
              onPressed: isButtonEnabled ? _completePage : null,
              child: Text(
              ...
              ),
              ),
            ],
          )]);
    return Scaffold(
      appBar: AppBar(
          title: Text('Task Screen')),
      body: taskScreen,
    );
  } }

ItemBought.dart

import 'package:flutter/material.dart';
import 'package:flutter_convertor/addImage.dart';

class ItemBought extends StatefulWidget{
  @override
  _ItemBoughtState createState() => _ItemBoughtState();
}
class _ItemBoughtState extends State<ItemBought> {
...
  @override
  Widget build(BuildContext context) {

    return Container(

      child:  Column(
          children: <Widget> [
            ...

        addImage(),
          ...
          ]
          ) 
    );
  }

}

addImage.dart

import 'package:flutter/material.dart';
import 'package:flutter_convertor/task.dart';

class addImage extends StatefulWidget{

  const addImage({this.formReady});
  final VoidCallback formReady;

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

class _addImageState extends State<addImage> {
 // const void({taskState.formReady});
 //   final VoidCallback formReady;
  @override
  Widget build(BuildContext context) {

    return Container(
            child: TextField(
             onChanged: (text){
               formReady(); //ERROR: The method formReady is not defined for the class _addImageState
             },
        )
    );
  }

}

如何从小部件addImage中调用formReady函数?

编辑:

我尝试了这段代码,并删除了所有编译错误,但是仍然没有得到想要的结果:

在addImage.dart中

TextField(
             onChanged: (text){
               addImage().formReady;
             }
)

在Itembought.dart

addImage(formReady: (){
                  ItemBought().formReady;
        }

在task.dart

 ItemBought(formReady: (){
                        this.formReady();
                      }),

1 个答案:

答案 0 :(得分:0)

  class task extends StatelessWidget {
    @override
    ....
    }
  }

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

  class _MyHomePageState extends State<MyHomePage> {

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new ItemBought(callback: (data){
                String receivedData = data;
              },)
            ],
          ),
        ),
      );
    }
  }

class ItemBought extends StatefulWidget {
    final void Function(String data) callback;

    const ItemBought({Key key, this.callback}) : super(key: key);

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

  class _ItemBoughtState extends State<ItemBought> {
    @override
    Widget build(BuildContext context) {
      return Container(
        child: new FlatButton(onPressed: (){
          widget.callback("Item Id Or name");
        }, child: new Text("Bought Item"),),
      );
    }
  }