Flutter自定义图片按钮
平时开发中经常遇见，Button中带图片。 图片的位置还不固定。 在此封装一个。希望对你有帮助
import 'package:flutter/material.dart'; typedef void OnPreessedCallBack(); enum JCImagePossition { left, right, top, bottom } // ignore: must_be_immutable class JCImageButton extends StatefulWidget { late String imageAssets; late String titleString; late VoidCallback callBack; late EdgeInsetsGeometry padding; late Color bgColor; late double imageSize; late double cornerRadius; late double interval; late Color titleColor; late double titleSize; late FontWeight fontweight; late JCImagePossition possiton; JCImageButton( {String? imageAssets, // 图片路径 String? titleString, // 标题 VoidCallback? callBack, // 回调 Color? bgColor, // 背景颜色 默认蓝色 Color? titleColor, // 默认白色 double? titleSize, // 默认16 FontWeight? fontweight, // 默认 FontWeight.w400 double? imageSize, // 图片尺寸 默认16 double? cornerRadius, // 圆角 默认2 double? interval, // 间距 默认8 JCImagePossition? possition, // 位置 默认 图片在左边，文字在右边 EdgeInsetsGeometry? padding // EdgeInsets.fromLTRB(72, 8, 72, 8) }) { this.imageAssets = imageAssets ?? ""; this.titleString = titleString ?? ""; this.bgColor = bgColor ?? Colors.blue; this.imageSize = imageSize ?? 16; this.cornerRadius = cornerRadius ?? 2; this.padding = padding ?? EdgeInsets.fromLTRB(72, 8, 72, 8); this.interval = interval ?? 8; this.possiton = possition ?? JCImagePossition.left; this.titleColor = titleColor ?? Colors.white; this.titleSize = titleSize ?? 16; this.fontweight = fontweight ?? FontWeight.w400; this.callBack = callBack ?? () { print("默认回调"); }; } @override _JCImageButtonState createState() => _JCImageButtonState(); } class _JCImageButtonState extends State<JCImageButton> { @override Widget build(BuildContext context) { return Container( alignment: Alignment.center, padding: widget.padding, decoration: BoxDecoration( borderRadius: BorderRadius.circular(widget.cornerRadius), color: widget.bgColor, ), child: TextButton( style: ButtonStyle( overlayColor: MaterialStateProperty.all(Colors.transparent)), onPressed: () { widget.callBack(); }, child: (widget.possiton == JCImagePossition.top || widget.possiton == JCImagePossition.bottom) ? _getTopAndBottomPosstionWidget(widget.possiton == JCImagePossition.top) : _getLeftAndRightPosstionWidget(widget.possiton == JCImagePossition.left) ), ); } Widget _getTopAndBottomPosstionWidget(bool isTop) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: isTop ? [ _getImage(), Container(height: widget.interval,), _getTitle()] : [ _getTitle(), Container(height: widget.interval,), _getImage()] ); } Widget _getLeftAndRightPosstionWidget(bool isLeft) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: isLeft ? [ _getImage(), SizedBox(width: widget.interval), _getTitle()] : [ _getTitle(), SizedBox(width: widget.interval), _getImage()] ); } Widget _getImage() { return Image.asset( '${widget.imageAssets}', width: widget.imageSize, height: widget.imageSize, ); } Widget _getTitle() { return Text( '${widget.titleString}', style: TextStyle( color: widget.titleColor, fontSize: widget.titleSize, fontWeight: widget.fontweight), ); } } 复制代码调用、那就简单了。
JCImageButton( callBack: () { _checkUpdate(); }, titleString: "有新版本可用，请及时更新", imageAssets: "assets/images/wn_update_version_icon.png", possition: JCImagePossition.left, // 图片位置。默认在左、可选上下左右 bgColor: ColorUtils.hexColor(0x2680FF), )
作者：东厂胡一刀
链接：https://juejin.cn/post/7024044637874569253