Question

因此，由于现有复选框的局限性，我不得不编写自己的复选框，我需要3个状态，其中包含一些逻辑。

我试图使图标在容器中居中，但没有成功，仅当我使用我猜为45的IconButton的最佳尺寸，并且IconButton太大而无法满足我的需要时，它才会居中。这是代码：

  Widget build(BuildContext context) {
    return Container(
      height: 25,
      width: 25,
      color: widget.status == Constants.Rejected
          ? Colors.red
          : widget.status == Constants.Done ? Colors.green : Colors.white,
      child: IconButton(
        icon: widget.status == Constants.Rejected
            ? Icon(
                Icons.close,
                color: Colors.white,
              )
            : widget.status == Constants.Done
                ? Icon(
                    Icons.check,
                    color: Colors.white,
                  )
                : Container(),
        onPressed: _changeState,
      ),
    );
  }

这是结果：

这是我使用45的高度和宽度时的结果：

谢谢！

Answer 1

添加padding: const EdgeInsets.all(0), 进入IconButton

或将GestureDetector与子级图标（而不是Button）一起使用，因为Button带有填充

  Widget build(BuildContext context) {
    return Container(
      height: 25,
      width: 25,
      color: widget.status == Constants.Rejected
          ? Colors.red
          : widget.status == Constants.Done ? Colors.green : Colors.white,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: widget.status == Constants.Rejected
            ? Icon(Icons.close, color: Colors.white)
            : widget.status == Constants.Done ? Icon(Icons.check, color: Colors.white) : Container(),
        onTap: (){
          // 
        },
      ),
    );
  }

对于我来说，GestureDetector是一个更好的选择，因为它没有像按钮那样飞溅动画

Answer 2

您要在padding: EdgeInsets.all(0)小部件中设置IconButton

仅因为默认情况下设置了填充，所以您需要删除该填充填充

Container(
        height: 25,
        width: 25,
        color: Colors.red,
          child: IconButton(
            padding: EdgeInsets.all(0), // here is set 0 padding
            icon: Icon(Icons.close, color: Colors.white),
            onPressed: () {},

        ));

自定义复选框中的居中图标

2 个答案: