示例图:

在这里插入图片描述

在这里插入图片描述

功能详解

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 按钮渐变背景色

Demo

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐