Flutter 自定義數字增減器組件

一、效果說明

要實現以下的效果：

點擊加減可以增減內部的數字。

二、代碼示例

class NumChangeWidget extends StatefulWidget {

  final height;
  int num;
  final ValueChanged<int> onValueChanged;

  NumChangeWidget({Key key, this.height = 36.0, this.num = 0, this.onValueChanged}) : super(key: key);

  @override
  _NumChangeWidgetState createState() {
    return _NumChangeWidgetState();
  }
}

class _NumChangeWidgetState extends State<NumChangeWidget> {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.height,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(2.0)),
        border: Border.all(color: Colors.grey, width: 0.5),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          GestureDetector(
            onTap: _minusNum,
            child: Container(
              width: 32.0,
              alignment: Alignment.center,
              child: Image.asset(AssetsImages.NUM_MINUS), // 設計圖
            ),
          ),
          Container(
            width: 0.5,
            color: Colors.grey,
          ),
          Container(
            width: 62.0,
            alignment: Alignment.center,
            child: Text(widget.num.toString(), maxLines: 1, style: TextStyle(fontSize: 20.0, color: Colors.black),),
          ),
          Container(
            width: 0.5,
            color: Colors.grey,
          ),
          GestureDetector(
            onTap: _addNum,
            child: Container(
              width: 32.0,
              alignment: Alignment.center,
              child: Image.asset(AssetsImages.NUM_ADD), // 設計圖
            ),
          ),
        ],
      ),
    );
  }

  void _minusNum() {
    if (widget.num == 0) {
      return;
    }

    setState(() {
      widget.num -= 1;

      if (widget.onValueChanged != null) {
        widget.onValueChanged(widget.num);
      }
    });
  }

  void _addNum() {
    setState(() {
      widget.num += 1;

      if (widget.onValueChanged != null) {
        widget.onValueChanged(widget.num);
      }
    });
  }
}

不到 100 行代碼搞定，是不是很簡單呢 ！