Flutter通用UI之EmptyPage

最新推荐文章于 2023-05-11 09:30:28 发布

风雪沧澜

最新推荐文章于 2023-05-11 09:30:28 发布

阅读量537

点赞数 1

分类专栏： Flutter通用UI

本文链接：https://blog.csdn.net/u012811342/article/details/105702582

版权

Flutter通用UI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

示例图：

在这里插入图片描述

功能详解

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