Description:

xy custom button

TODO: xy_custom_btn 是一个自定义的多功能按钮，可以实现各种按钮效果比如：1.title和image的各种布局方式
2.按钮的高亮效果等
Features #
TODO: 1.title和image的各种布局方式 2.按钮的高亮效果等
Getting started #
TODO: 直接用就行
Usage #
TODO: 给例子
const like = """
late String text;
late Widget content = Container(
width: ScreenUtil.getScreenW(context),
height: 44,
color: Colors.red,
);

switch(widget.btnType)
{
case UseBtnType.onlyTitle:
text = "只有文字的情况：";
content = CustomButton(
margin: EdgeInsets.only(left: margin,right: margin),
title: "登录",
fontSize: 18,
backgroundColor: Color(0xFFFB1B1B),
disabledBgColor: Color(0x80FB1B1B),
width:
ScreenUtil.getScreenW(context) - 2 * margin,
height: 44,
borderRadius: BorderRadius.circular(6),
onPressed: (context, btn) {

},
);
break;
case UseBtnType.onlyImage:
text = '只有图片的情况：';
content = CustomButton(
margin: EdgeInsets.only(left: margin),
image: Image.asset('images/login_no_eye.png'),
selectedImage: Image.asset('images/login_eye.png'),
width: 50,
height: 50,
isSelected: imgSelected,
onPressed: (context, btn) {
setState(() {
imgSelected = !imgSelected;
print('imgSelected:$imgSelected');
});
},
);
break;
case UseBtnType.horizontal:
text = '水平布局情况：';
content = Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
CustomButton(
positionType: CustomButtonTitleImagePosition.titleLeftImageRight,
title: '标题左图片右',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 44,
borderRadius: BorderRadius.circular(6),
),
SizedBox(height: 10,),
CustomButton(
positionType: CustomButtonTitleImagePosition.imageLeftTitleRight,
title: '标题右图片左',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 44,
borderRadius: BorderRadius.circular(6),
),
SizedBox(height: 10,),
CustomButton(
positionType: CustomButtonTitleImagePosition.titleLeftImageRight,
title: '标题左图片右 左对齐',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 250,
height: 44,
contentAlignment: CustomButtonContentAlignment.left,
hPadding: 10, //左对齐10边距
borderRadius: BorderRadius.circular(6),
),
SizedBox(height: 10,),
Row(
children: [
CustomButton(
margin: EdgeInsets.only(left: margin),
positionType:
CustomButtonTitleImagePosition.titleLeftImageRight,
title: '标题右图片左 撑开模式',
titleColor: Colors.black,
image: Image.asset('images/default_head_icon.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
borderRadius: BorderRadius.circular(6),
// stretchPadding: EdgeInsets.only(left: 15,top: 10), //撑开边距
),
],
),
SizedBox(height: 10,),
CustomButton(
positionType: CustomButtonTitleImagePosition.titleLeftImageRight,
title: '标题左图片右 between',
titleColor: Colors.black,
image: Image.asset('images/default_head_icon.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 300,
height: 44,
contentAlignment: CustomButtonContentAlignment.between,
ltPadding: 10, //左对齐10边距
borderRadius: BorderRadius.circular(6),
),
],
);
break;
case UseBtnType.vertical:
text = '垂直布局情况：';
content =
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
CustomButton(
positionType: CustomButtonTitleImagePosition.titleTopImageBottom,
title: '标题上图片下',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 60,
borderRadius: BorderRadius.circular(6),
),
SizedBox(
height: 10,
),
CustomButton(
positionType: CustomButtonTitleImagePosition.imageTopTitleBottom,
title: '标题下图片上',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 60,
borderRadius: BorderRadius.circular(6),
),
SizedBox(
height: 10,
),
CustomButton(
positionType: CustomButtonTitleImagePosition.titleTopImageBottom,
title: '标题上图片下 左对齐',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 44,
contentAlignment: CustomButtonContentAlignment.left,
hPadding: 10,
//左对齐10边距
borderRadius: BorderRadius.circular(6),
),
SizedBox(
height: 10,
),
CustomButton(
margin: EdgeInsets.only(left: margin),
positionType:
CustomButtonTitleImagePosition.imageTopTitleBottom,
title: '标题下图片上 撑开模式',
titleColor: Colors.black,
image: Image.asset('images/default_head_icon.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
borderRadius: BorderRadius.circular(6),
stretchPadding: EdgeInsets.only(left: 15, top: 10), //撑开边距
),
SizedBox(height: 10,),
CustomButton(
margin: EdgeInsets.only(left: margin),
positionType: CustomButtonTitleImagePosition.titleTopImageBottom,
title: '标题上图片下 between',
titleColor: Colors.black,
image: Image.asset('images/default_head_icon.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 100,
contentAlignment: CustomButtonContentAlignment.between,
ltPadding: 10, //上对齐10边距
borderRadius: BorderRadius.circular(6),
),
]);
break;
case UseBtnType.alignment:
text = '各种对齐方式:';
content = Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CustomButton(
positionType: CustomButtonTitleImagePosition.titleLeftImageRight,
contentAlignment: CustomButtonContentAlignment.left,
title: '标题左图片右',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 44,
borderRadius: BorderRadius.circular(6),
),
CustomButton(
positionType: CustomButtonTitleImagePosition.titleLeftImageRight,
contentAlignment: CustomButtonContentAlignment.right,
title: '标题左图片右',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 44,
borderRadius: BorderRadius.circular(6),
),
CustomButton(
positionType: CustomButtonTitleImagePosition.titleLeftImageRight,
contentAlignment: CustomButtonContentAlignment.top,
title: '标题左图片右',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 44,
borderRadius: BorderRadius.circular(6),
),
CustomButton(
positionType: CustomButtonTitleImagePosition.titleLeftImageRight,
contentAlignment: CustomButtonContentAlignment.bottom,
title: '标题左图片右',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 44,
borderRadius: BorderRadius.circular(6),
),
CustomButton(
positionType: CustomButtonTitleImagePosition.titleLeftImageRight,
contentAlignment: CustomButtonContentAlignment.between,
title: '标题左图片右',
titleColor: Colors.black,
image: Image.asset('images/login_eye.png'),
space: 10,
backgroundColor: Color(0xFFFB1B1B),
width: 200,
height: 44,
borderRadius: BorderRadius.circular(6),
),
],
);
break;
}
return Container(
width: ScreenUtil.getScreenW(context),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text,
style: TextStyle(
fontSize: 15,
),),
content,
],
),
);
""";
copied to clipboard
Additional information #
TODO: 如果对使用不太了解，可以先看例子。如果有问题可以私信留言哦。

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter