使用方法

Question

在父类ParentRandomRender中有一个简单的ListView.Builder

Expanded(
  child: Container( 
    child: ListView.builder(
      padding: EdgeInsets.only(top: 10),
      itemCount: _data.length,
      itemBuilder: (context, index) {
        return GestureDetector(
        onTap: () {
          print("do something");
        },
        child: Container(
          width: 44.0,
          height: 44.0,
          child: Align(
            child: new Image.asset(
              'images/save.png',
              width: 24.0, 
              height: 24.0
            ),
          )
        )
      },
    )
  )
)

onTap可以正常工作，它可以在ParentRandomRender中满足我的要求。

现在，我希望代码更加简洁，因此我创建了一个ChildRandomRow类，并将GestureDetector放在下面，如下所示。

class `ChildRandomRow` extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print("do something");
      },
      child: Container(
        width: 44.0,
        height: 44.0,
        child: Align(
          child: new Image.asset(
            'images/save.png',
            width: 24.0, 
            height: 24.0
          ),
        )
      )
    )
  }
}

现在在ParentRandomRender中，我将执行以下操作

Expanded(
  child: Container( 
    child: ListView.builder(
      padding: EdgeInsets.only(top: 10),
      itemCount: _data.length,
      itemBuilder: (context, index) {
        return ChildRandomRow(); // on tap callback?
        )
      },
    )
  )
),

如何捕获ChildRandomRow的onTap回调或将其传回其ParentRandomRender类？

Answer 1

您应将一个函数传递给ChildRandomRow。然后，您可以在onTap中调用它。

class ChildRandomRow extends StatelessWidget {
  final Function callback;

  const ChildRandomRow({this.callback}); //making it a named parameter, not required, but easier

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 1st option
      onTap: () {
        print("do something");
        callback();
      },
      // 2nd option
      onTap: callback, // if this doesn't work, try anonymous function aka () => callback(),
      ...
    )
  }
}

使用方法

这是在代码中实现回调的方法。

Expanded(
  child: Container( 
    child: ListView.builder(
      padding: EdgeInsets.only(top: 10),
      itemCount: _data.length,
      itemBuilder: (context, index) {
        return ChildRandomRow(
          callback: () {
            print("callback");
          },
        );
      },
    )
  )
),

Answer 2

一种方法可以是，像这样声明abstract class进行回调，

abstract class MyCallback {
  void onPositive(String data);
  void onNegative();
}

然后在ChildRandomRow内部声明此MyCallback，

class ChildRandomRow extends StatelessWidget {
  MyCallback mMyCallback;

  ChildRandomRow([this.mMyCallback]);
....
//do this inside onTap()
       onTap: () {
          mMyCallback.onPositive('YOUR DATA');
         },

现在ParentRandomRender上实现此MyCallback，

class _ParentRandomRender extends State<ContactUs> implements MyCallback {

  @override
  void onNegative() {}

  @override
  void onPositive(String data) {
// DO YOU LOGIC
  }

通过this，将context提供给ChildRandomRow

itemBuilder: (context, index) {
        return ChildRandomRow(this); // on tap callback?
        )
      },

子级到父级回拨颤抖

2 个答案:

使用方法