将方法作为参数传递给小部件

Question

我有一个自定义按钮小部件：

class Button extends StatelessWidget {
  final String text;

  Button(this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      child: SizedBox(
        width: double.infinity,
        child: RaisedButton(
          onPressed: () => {}, // Use the function from parent Widget
          child: Padding(
              padding: EdgeInsets.symmetric(vertical: 13),
              child: Text(
                text,
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
          color: COLOR_BLUE,
          textColor: Colors.white,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
        ),
      ),
    );
  }
}

然后在父窗口小部件中，我想向该按钮窗口小部件传递onPressed方法：

...
myMethod () => {
   // do some stuff
}
...
Padding(
    padding: EdgeInsets.only(bottom: 10),
    child: Button("Log in", myMethod),
),
...

如何告诉按钮小部件将myMethod用于onPress？

Answer 1

已经有一些预定义的类型。

VoidCallback

如果要创建类似这样的参数：

onPressed: () { },

然后您可以像这样在类中定义它：

class MyWidget extends StatelessWidget {

  MyWidget({Key key, this.onPressed}) : super(key: key);

  final VoidCallback onPressed;

  // ...
}

注释

typedef在源代码中定义如下：

typedef VoidCallback = void Function();

异步版本为AsyncCallback。

typedef AsyncCallback = Future<void> Function();

ValueSetter

如果要创建类似这样的参数：

onPressed: (value) { },

然后您可以像这样在类中定义它：

class MyWidget extends StatelessWidget {

  MyWidget({Key key, this.onPressed}) : super(key: key);

  final ValueSetter<String> onPressed;

  // ...
}

注释

typedef在源代码中定义如下：

typedef ValueSetter<T> = void Function(T value);

如果要指定仅在发生更改时才调用该函数，请改用ValueChanged。

typedef ValueChanged<T> = void Function(T value);

异步版本为AsyncValueSetter。

typedef AsyncValueSetter<T> = Future<void> Function(T value);

ValueGetter

如果要创建类似这样的参数：

onPressed: () => value,

然后您可以像这样在类中定义它：

class MyWidget extends StatelessWidget {

  MyWidget({Key key, this.onPressed}) : super(key: key);

  final ValueGetter<String> onPressed;

  // ...
}

注释

typedef在源代码中定义如下：

typedef ValueGetter<T> = T Function();

异步版本为AsyncValueGetter。

typedef AsyncValueGetter<T> = Future<T> Function();

定义您自己的类型

从以上所有示例中可以看到，对于typedef来说，一切仅仅是Function。这样就很容易制作自己的东西。

假设您要执行以下操作：

onEvent: (context, child) => value,

然后，您将像这样制作typedef：

typedef MyEventCallback = int Function(BuildContext context, Widget widget);

并像这样使用它：

class MyWidget extends StatelessWidget {

  MyWidget({Key key, this.onEvent}) : super(key: key);

  final MyEventCallback onEvent;

  // ...
}

有关更多信息，请参见documentation。

Answer 2

使用VoidCallback类型，如下所示：

class Button extends StatelessWidget {
  final String text;
  final VoidCallback callback;

  Button(this.text, this.callback);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      child: SizedBox(
        width: double.infinity,
        child: RaisedButton(
          onPressed: callback, // Simply put the function name here, DON'T use ()
          child: Padding(
              padding: EdgeInsets.symmetric(vertical: 13),
              child: Text(
                text,
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
          color: COLOR_BLUE,
          textColor: Colors.white,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
        ),
      ),
    );
  }
}