示例图:
功能详解
EmptyPage支持自定义图片,文案,按钮是否展示,按钮字体大小,字体色值,边框,背景色
代码
import 'package:flutter/material.dart';
class EmptyPage extends StatelessWidget {
final String imageUrl; //占位图
final String desc; //描述
bool hideBtn; //是否隐藏重新加载按钮
OnBtnClickListener listener;
Color borderColor;
Color textColor;
double textSize;
double borderRadius;
String btnText;
List<Color> list;
EmptyPage(
{@required this.imageUrl,
this.desc,
this.hideBtn,
this.listener,
this.textSize,
this.textColor,
this.borderColor,
this.borderRadius,
this.btnText,
this.list});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(width: 120, height: 120, child: Image.asset(imageUrl)),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
desc ?? "",
style: TextStyle(fontSize: 13, color: Color(0xffc6cdd3)),
),
),
_buildRetryBtn()
],
),
),
);
}
Widget _buildRetryBtn() {
var _hideBtn = hideBtn ?? false;
var _list = list ?? [Color(0xffFFE251), Color(0xffFDD108)];
if (!_hideBtn) {
return Container(
height: 40,
margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
decoration: BoxDecoration(
border: Border.all(color: borderColor ?? Colors.black),
gradient: LinearGradient(colors: _list),
borderRadius: BorderRadius.circular(borderRadius ?? 20)),
child: FlatButton(
onPressed: () {
listener.onTap();
},
highlightColor: Color(0xffFFE251),
child: Text(
btnText ?? "重新加载",
style: TextStyle(
fontSize: textSize ?? 16,
color: textColor ?? Color(0xff343a40)),
),
),
);
} else {
return Container();
}
}
}
abstract class OnBtnClickListener {
void onTap();
}
代码调用
EmptyPage(imageUrl: "images/nonet.png",desc: "网络飞走了",)
点击事件回调
@override
void onTap() {
// TODO: implement onTap
}
属性含义
属性 | 含义 |
---|---|
imageUrl | 图片地址 |
desc | 文案描述 |
hideBtn | 是否隐藏按钮 |
listener | 点击回调 |
borderColor | 按钮边框颜色 |
textColor | 字体颜色 |
textSize | 字体大小 |
borderRadius | 按钮弧度 |
btnText | 按钮文案 |
list | 按钮渐变背景色 |