[英]Flutter - How to make a reusable button change its image and color?
我有一个按钮,可以在多个不同页面上使用。 我希望能够更改图像并在按下按钮时用一种颜色填充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');
},
),
将按钮设置为statefullWidget,然后将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();
},
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.