flutter - Flutter-如何使可重复使用的按钮更改其图像和颜色？

Question

我有一个可以在多个不同页面上使用的按钮。我希望能够更改图像并在按下按钮时用一种颜色填充OutlineButton。如何做到这一点？

class BackArrowButton extends StatelessWidget {
  final Widget child;
  final GestureTapCallback onPressed;
  BackArrowButton({@required this.onPressed, this.child});

  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      padding: const EdgeInsets.all(15.0),
      child: child,
      borderSide: BorderSide(width: 1.0, color: Color(0xff1A1A1A)),
      highlightElevation: 0.0,
      highlightedBorderColor: Color(0xFF1A1A1A),
      splashColor: Color(0x1F1A1A1A),
      shape: CircleBorder(),
      onPressed: onPressed,
    );
  }

这就是我在多个页面上调用以显示按钮的内容。

BackArrowButton(
  child: ClipOval(
    child: Container(
      child: Image.asset(
        'assets/images/icons/arrow_back.png',
      ),
    ),
  ),
  onPressed: () {
    Navigator.pop(context, '/home');
  },
),

Answer 1

将按钮设置为有状态的Widget，然后将setState添加到onPress调用中。

class BackArrowButton extends StatefulWidget {
  final Widget child;
  final GestureTapCallback onPressed;

  BackArrowButton({@required this.onPressed, this.child});

  @override
  _BackArrowButtonState createState() => _BackArrowButtonState();
}


class _BackArrowButtonState extends State<BackArrowButton> {



  @override
  void initState() {
    _color = Colors.green;
    super.initState();
  }

  Color _color;
  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      padding: const EdgeInsets.all(15.0),
      child: widget.child,
      borderSide: BorderSide(width: 1.0, color: Color(0xff1A1A1A)),
      highlightElevation: 0.0,
      highlightedBorderColor: _color,
      splashColor: Color(0x1F1A1A1A),
      shape: CircleBorder(),
      onPressed: (){
        setState((){
           _color = Colors.red;
        });
        widget.onPressed();
      },
    );
  }
}