Flutter

Question

我有一个名为 RowItem 的自定义小部件，它是一个有状态小部件。当用户单击小部件时，它会动画化。但是我也想 return 将 onTap 事件发送到父窗口小部件，但我不知道该怎么做...

这是我的 RowItem 小部件：

class _RowItemState extends State<RowItem> {
  bool isSelected = false;
  double underlineWith = 0;

  @override
  Widget build(context) {
    // Pass the text down to another widget
    return new GestureDetector(
      onTap: () {
        isSelected = !isSelected;
        if (isSelected) {
          setState(() {
            underlineWith = 18.0;
          });
        } else {
          setState(() {
            underlineWith = 0;
          });
        }
      },
      child: new Column(
        children: <Widget>[
          new Padding(
              padding: EdgeInsetsDirectional.fromSTEB(8.0, 0.0, 8.0, 0.0),
              child: new Container(
                child: new Text(
                  widget.text,
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.ellipsis,
                  softWrap: true,
                  style: TextStyle(
                      fontSize: 12.0,
                      fontWeight: FontWeight.bold,
                      color: Color(0x99222222)),
                ),
              )),
          new Padding(
            padding: EdgeInsetsDirectional.fromSTEB(0.0, 5.0, 0.0, 10.0),
            child: new AnimatedContainer(
              height: 2,
              width: underlineWith,
              color: widget.underlineColor,
              duration: Duration(milliseconds: 150),
            ),
          ),
        ],
      ),
    );
  }
}

如果我想 return onTap 事件，我可以这样做：

return new GestureDetector(
  onTap: widget.onTap
}

但是我怎样才能同时执行动画和 return onTap 事件？

我想在点击 RowItem 时运行编码：

new GridView.builder(
                                  physics: const NeverScrollableScrollPhysics(),
                                  shrinkWrap: true,
                                  itemCount: _subCategories.length,
                                  gridDelegate:
                                  new SliverGridDelegateWithFixedCrossAxisCount(
                                      childAspectRatio: 3.2,
                                      crossAxisCount: 3),
                                  itemBuilder: (BuildContext context, int index) {
                                    return new RowItem(
                                      text: _subCategories[index],
                                      underlineColor: Color(0xff73A6AD),
                                      onTap: () {
                                        setState(() {
                                          //do something;
                                        });
                                      },
                                    );
                                  }
)

Answer 1

在 RowItem 中创建一个函数 handleOnTap()。在此函数中，您更新值和 setState，然后调用 widget.onTap()

func handleOnTap() {
  isSelected = !isSelected;
  if (isSelected) {
    setState(() {
      underlineWith = 18.0;
    });
  } else {
    setState(() {
      underlineWith = 0;
    });
  }
  widget.onTap();
}

Answer 2

根据侯赛因的回答找到了解决方案：

handleOnTap(){
    isSelected = !isSelected;
    if (isSelected) {
      setState(() {
        underlineWith = 18.0;
      });
    } else {
      setState(() {
        underlineWith = 0;
      });
    }
    return widget.onTap();
}





@override
Widget build(context) {
    // Pass the text down to another widget
    return new GestureDetector(
      onTap: () => handleOnTap()
      ...

Flutter - return 来自自定义小部件的 onTap 并执行动画

Flutter - return onTap from custom widget and perform animation

flutter-animation