Flutter 重复造轮子 (10) Notice Bar 消息

作者: 半城半离人 | 来源:发表于2023-09-22 08:51 被阅读0次

详细可以访问仓库 HcUi: 重复创造Flutter 的轮子在原有组件上拓展展现出新的特性 (gitee.com)

介绍

给用户提示文字消息

450fc559-2a6e-48d3-942a-9b98eef19acc.gif

代码演示

基础用法

       HcNoticeBar(
            content: "这是普通的通知公告",
          ),

带图标的公告

          HcNoticeBar(
            prefixIcon: Icon(Icons.info_outline),
            content: "带双侧图标的通知公告",
            suffixIcon: Icon(Icons.close),
          ),

带回调的公告

           HcNoticeBar(
            prefixIcon: Icon(Icons.info_outline),
            content: "带回调的通知公告",
            suffixIcon: Icon(Icons.close),
            callback: (String name) {
              print("我点击的部位是:${name}");
            },
          ),

横向滚动的公告

             HcNoticeBar(
            showType: HcNoticeBarShowType.scroll,
            //不满一行强制滚动
            forceScroll: true,
            prefixIcon: Icon(Icons.info_outline),
            content: "这是一个横向滚动的公告",
            suffixIcon: Icon(Icons.close),
            callback: (String name) {
              print("我点击的部位是:${name}");
            },
          ),

纵向滚动的公告

          HcNoticeBar(
            showType: HcNoticeBarShowType.scroll,
            scrollDirection: Axis.vertical,
            duration: 2000,
            prefixIcon: Icon(Icons.info_outline),
            content: "这是一个文字按长度自动分割的纵向滚动的公告啊啊啊",
            suffixIcon: Icon(Icons.close),
            callback: (String name) {
              print("我点击的部位是:${name}");
            },
          ),

自定义纵向滚动的公告

           HcNoticeBar(
            showType: HcNoticeBarShowType.scroll,
            scrollDirection: Axis.vertical,
            duration: 6000,
            prefixIcon: Icon(Icons.info_outline),
            contentGroup: [
              "风急天高猿啸哀，",
              "渚清沙白鸟飞回。",
              "无边落木萧萧下，",
              "不尽长江滚滚来。",
              "万里悲秋常作客，",
              "百年多病独登台。",
              "艰难苦恨繁霜鬓，",
              "潦倒新停浊酒杯。"
            ],
            suffixIcon: Icon(Icons.close),
            callback: (String name) {
              print("我点击的部位是:${name}");
            },
          ),

自定义内容组件

          HcNoticeBar(
            prefixIcon: Icon(Icons.info_outline),
            contentWidget: Text("这是一个自定义的组件 "),
            suffixIcon: Icon(Icons.close),
          ),

横向手动拖动显示

          HcNoticeBar(
            showType: HcNoticeBarShowType.drag,
            prefixIcon: Icon(Icons.info_outline),
            content: "横向文字过长时候,不会显示省略符可以手动拖动显示完全 ",
          ),

展示全部信息

       HcNoticeBar(
            showType: HcNoticeBarShowType.full,
            prefixIcon: Icon(Icons.info_outline),
            content:
                "生态文明建设是关系中华民族永续发展的根本大计。习近平总书记指出，要把建设美丽中国摆在强国建设、民族复兴的突出位置，以高品质生态环境支撑高质量发展，加快推进人与自然和谐共生的现代化。各地坚持以习近平生态文明思想为指引，牢固树立和践行绿水青山就是金山银山的理念，以更高站位、更宽视野、更大力度，全面推进美丽中国建设。",
            suffixIcon: Icon(Icons.close),
          ),

展示指定行数信息

          HcNoticeBar(
            showType: HcNoticeBarShowType.ellipsis,
            maxLines: 2,
            prefixIcon: Icon(Icons.info_outline),
            content:
            "生态文明建设是关系中华民族永续发展的根本大计。习近平总书记指出，要把建设美丽中国摆在强国建设、民族复兴的突出位置，以高品质生态环境支撑高质量发展，加快推进人与自然和谐共生的现代化。各地坚持以习近平生态文明思想为指引，牢固树立和践行绿水青山就是金山银山的理念，以更高站位、更宽视野、更大力度，全面推进美丽中国建设。",
            suffixIcon: Icon(Icons.close),
          ),

API

props

参数	说明	类型	默认值	是否必填
maxLines	需要展示的行数	int	1	false
scrollDirection	滚动方向	Axis	Axis.horizontal	false
prefixIcon	左侧图标	Widget	-	false
suffixIcon	右侧图标	Widget	-	false
spacing	组件内间隔	double	8.0	false
contentWidget	自定义内容组件	Widget	-	false
content	文字内容	String	-	true
contentGroup	文字内容组(纵向滚动)	List<String>	-	false
showType	展示类型	HcNoticeBarShowType	HcNoticeBarShowType.ellipsis	true
forceScroll	横向滚动时不满一屏是否强制滚动	bool	false	false
duration	滚动时长(毫秒)	duration	600000	false
textStyle	文字样式	TextStyle	-	false
decoration	背景装饰器	BoxDecoration	-	false
padding	组件内边距	EdgeInsets	(v:16,h:8)	false
maxLines	文字最大展示行数	int	1	false
callback	点击的回调	HcNoticeBarCallback	-	false

HcNoticeBarShowType

展示内容组件的方式(不对自定义内容组件控制)

参数名	说明
drag	手动滑动(横向/纵向)
scroll	自动滚动(横向/纵向)
ellipsis	带缩略符号(展示多少maxLines控制)
full	全部展示

Function

方法名	说明	参数	返回类型
HcNoticeBarCallback	点击相应部分的回调	Function(String name)	void

项目源码

ypedef HcNoticeBarCallback = Function(String);

enum HcNoticeBarShowType {
  drag,
  scroll,
  ellipsis,
  full,
}

class HcNoticeBar extends StatelessWidget {
  //滚动方向
  final Axis scrollDirection;

  //左侧图标
  final Widget? prefixIcon;

  //尾部图标
  final Widget? suffixIcon;

  // 滚动的通知内容
  final String? content;

  //滚动通知的内容组 用于纵向滚动 如果横向滚动文字会拼接
  final List<String>? contentGroup;

  //不满一屏是否强制滚动
  final bool forceScroll;

  //中间的自定义组件
  final Widget? contentWidget;

  //间隔
  final double spacing;

  //组件的点击回调
  final HcNoticeBarCallback? callback;

  //展示的类型
  final HcNoticeBarShowType showType;

  //滚动时长
  final Duration duration;

  //文字样式
  final TextStyle textStyle;

  //北京装饰器
  final BoxDecoration decoration;

  //边距
  final EdgeInsets padding;

  //最大显示行数
  final int maxLines;

  const HcNoticeBar(
      {super.key,
      this.scrollDirection = Axis.horizontal,
      this.prefixIcon,
      this.suffixIcon,
      this.spacing = 8.0,
      this.callback,
      this.contentWidget,
      this.content,
      this.contentGroup,
      this.showType = HcNoticeBarShowType.ellipsis,
      this.forceScroll = false,
      this.duration = const Duration(milliseconds: 600000),
      this.textStyle = const TextStyle(color: Colors.black, fontSize: 16),
      this.decoration = const BoxDecoration(color: Colors.transparent),
      this.padding = const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
      this.maxLines = 1});

  const HcNoticeBar.scroll(
      {super.key,
      required this.scrollDirection,
      this.prefixIcon,
      this.suffixIcon,
      this.content,
      this.contentGroup,
      this.forceScroll = false,
      this.contentWidget,
      this.spacing = 8.0,
      this.callback,
      this.duration = const Duration(milliseconds: 600000),
      this.textStyle = const TextStyle(color: Colors.black, fontSize: 16),
      this.decoration = const BoxDecoration(),
      this.padding = const EdgeInsets.symmetric(vertical: 16, horizontal: 8)})
      : showType = HcNoticeBarShowType.scroll,
        maxLines = 1;

  @override
  Widget build(BuildContext context) {
    Widget buildContent() {
      if (contentWidget != null) {
        return contentWidget!;
      }
      if (showType == HcNoticeBarShowType.scroll ||
          showType == HcNoticeBarShowType.drag) {
        return HcMarquee(
          duration: duration,
          textStyle: textStyle,
          forceScroll:forceScroll,
          enableScroll: showType == HcNoticeBarShowType.scroll,
          content: content,
          contentList: contentGroup,
          scrollDirection: scrollDirection,
        );
      }
      return HcTextEllipsis(
        separateShow: false,
        showEllipsisBtn: callback != null,
        content: content ?? contentGroup?.join("") ?? "",
        contentStyle: textStyle,
        expandText: "详情",
        maxLines: showType == HcNoticeBarShowType.full ? 2 * 31 : maxLines,
      );
    }

    Widget buildGestureDetector({name, child}) {
      return GestureDetector(
        child: child,
        onTap: () {
          if (callback != null) {
            callback!.call(name);
          }
        },
      );
    }

    return Container(
      padding: padding,
      decoration: decoration,
      child: Row(
        children: [
          if (prefixIcon != null)
            Padding(
              padding: EdgeInsets.only(right: spacing),
              child: buildGestureDetector(name: 'prefix', child: prefixIcon!),
            ),
          Expanded(
              child: buildGestureDetector(
            name: 'content',
            child: buildContent(),
          )),
          if (suffixIcon != null)
            Padding(
              padding: EdgeInsets.only(left: spacing),
              child: buildGestureDetector(name: 'suffix', child: suffixIcon!),
            ),
        ],
      ),
    );
  }
}

网友评论

本文标题：Flutter 重复造轮子 (10) Notice Bar 消息

本文链接：https://www.haomeiwen.com/subject/azltvdtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！