Question

我有一个名为RowItem的自定义小部件，它是一个有状态的小部件。当用户单击窗口小部件时，它将进行动画处理。但是我也想将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),
            ),
          ),
        ],
      ),
    );
  }
}

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

return new GestureDetector(
  onTap: widget.onTap
}

但是我该如何同时做动画和返回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-从自定义小部件返回onTap并执行动画

2 个答案: