Flutter:跑马灯公告栏

news2025/3/16 4:06:55

在这里插入图片描述

组件

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:ducafe_ui_core/ducafe_ui_core.dart';

class MarqueeNotice extends StatefulWidget {
  /// 公告数据列表,每条公告包含title和desc
  final List<Map<String, String>> notices;
  
  /// 滚动速度,数值越小滚动越快(像素/秒)
  final double scrollSpeed;
  
  /// 背景颜色
  final Color backgroundColor;
  
  /// 公告栏高度
  final double height;
  
  /// 公告图标
  final Widget? icon;

  /// 公告文本颜色
  final Color textColor;
  
  /// 公告字体大小
  final double fontSize;
  
  /// 公告条目间距
  final double itemSpacing;

  const MarqueeNotice({
    super.key,
    required this.notices,
    this.scrollSpeed = 50.0,
    this.backgroundColor = Colors.transparent,
    this.height = 40,
    this.icon,
    this.textColor = Colors.white,
    this.fontSize = 24,
    this.itemSpacing = 60,
  });

  @override
  State<MarqueeNotice> createState() => _MarqueeNoticeState();
}

class _MarqueeNoticeState extends State<MarqueeNotice> with SingleTickerProviderStateMixin {
  late ScrollController _scrollController;
  late Timer _timer;
  late List<Map<String, String>> _extendedNotices;
  double _scrollOffset = 0.0;
  double _maxScrollExtent = 0.0;
  
  @override
  void initState() {
    super.initState();
    
    // 扩展公告列表使其可以循环滚动(复制一份公告列表)
    _extendedNotices = [...widget.notices, ...widget.notices];
    
    _scrollController = ScrollController();
    
    // 在布局完成后开始滚动
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _startScrolling();
    });
  }
  
  // 开始滚动动画
  void _startScrolling() {
    // 测量滚动区域总宽度的一半(原始公告列表的宽度)
    _maxScrollExtent = _scrollController.position.maxScrollExtent / 2;
    
    // 设置定时器,实现滚动效果
    _timer = Timer.periodic(const Duration(milliseconds: 50), (timer) {
      _scrollOffset += 1.0;
      
      // 当滚动到第一份公告列表的末尾时,重置到开头位置
      if (_scrollOffset >= _maxScrollExtent) {
        _scrollOffset = 0.0;
        _scrollController.jumpTo(_scrollOffset);
      } else {
        _scrollController.animateTo(
          _scrollOffset,
          duration: const Duration(milliseconds: 50),
          curve: Curves.linear,
        );
      }
    });
  }
  
  @override
  void dispose() {
    _timer.cancel();
    _scrollController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.height.w,
      color: widget.backgroundColor,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        controller: _scrollController,
        physics: const NeverScrollableScrollPhysics(), // 禁用手动滚动
        child: Row(
          children: _buildNoticeItems(),
        ),
      ),
    );
  }
  
  List<Widget> _buildNoticeItems() {
    return _extendedNotices.map((notice) {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: widget.itemSpacing.w / 2),
        child: Row(
          children: [
            // 如果提供了图标,则显示图标
            if (widget.icon != null) ...[
              widget.icon!,
              SizedBox(width: 10.w),
            ],
            
            // 公告文本
            RichText(
              text: TextSpan(
                children: [
                  TextSpan(
                    text: "${notice['title']} ",
                    style: TextStyle(
                      color: widget.textColor,
                      fontSize: widget.fontSize.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  TextSpan(
                    text: notice['desc'],
                    style: TextStyle(
                      color: widget.textColor,
                      fontSize: widget.fontSize.sp,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    }).toList();
  }
} 

页面调用

// 模拟数据
final List notices = [
  {
    'title': '用户**1564**',
    'desc': '获得了 20.06 USDT 佣金',
  },
  {
    'title': '用户**3721**',
    'desc': '获得了 35.82 USDT 佣金',
  },
  {
    'title': '用户**9823**',
    'desc': '获得了 15.45 USDT 佣金',
  },
  {
    'title': '用户**6471**',
    'desc': '获得了 42.18 USDT 佣金',
  },
  {
    'title': '用户**2389**',
    'desc': '获得了 28.67 USDT 佣金',
  },
];
MarqueeNotice(
  noti
  ces: List<Map<String, String>>.from(controller.notices),
  height: 80,
  backgroundColor: Colors.transparent,
  textColor: AppTheme.color999,
  fontSize: 24,
  itemSpacing: 100,
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2315777.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Jmeter下载及环境配置

Jmeter下载及环境配置 java环境变量配置配置jdk环境变量检查是否配置成功JMeter下载 java环境变量配置 访问地址&#xff1a; https://www.oracle.com/cn/java/technologies/downloads/ 注意&#xff1a;需要自己注册账号 下载完成&#xff0c;解压后的目录为&#xff1a; …

【初级篇】如何使用DeepSeek和Dify构建高效的企业级智能客服系统

在当今数字化时代,企业面临着日益增长的客户服务需求。使用Dify创建智能客服不仅能够提升客户体验,还能显著提高企业的运营效率。关于DIfy的安装部署,大家可以参考之前的文章: 【入门级篇】Dify安装+DeepSeek模型配置保姆级教程_mindie dify deepseek-CSDN博客 AI智能客服…

微信小程序threejs三维开发

微信小程序threejs开发 import * as THREE from three; const { performance, document, window, HTMLCanvasElement, requestAnimationFrame, cancelAnimationFrame, core, Event, Event0 } THREE .DHTML import Stats from three/examples/jsm/libs/stats.module.js; im…

大数据-spark3.5安装部署之standalone模式

真实工作中还是要将应用提交到集群中去执行&#xff0c;Standalone模式就是使用Spark自身节点运行的集群模式&#xff0c;体现了经典的master-slave模式。集群共三台机器&#xff0c;具体如下 u22server4spark&#xff1a; master worker u22server4spark2&#xff1a; worke…

技术视界|构建理想仿真平台,加速机器人智能化落地

在近期的 OpenLoong 线下技术分享会 上&#xff0c;松应科技联合创始人张小波进行了精彩的演讲&#xff0c;深入探讨了仿真技术在机器人智能化发展中的关键作用。他结合行业趋势&#xff0c;剖析了现有仿真平台的挑战&#xff0c;并描绘了未来理想仿真系统的设计理念与实现路径…

AutoGen多角色、多用户、多智能体对话系统

2023-03-11-AutoGen 使用【autoGenchainlitdeepSeek】实现【多角色、多用户、多智能体对话系统】 1-核心思路 01&#xff09;技术要点&#xff1a;autoGenchainlitdeepSeek02&#xff09;什么是autoGen->autogen是微软旗下的多智能体的框架03&#xff09;什么是chainlit-&g…

SQL99 多表查询

内连接&#xff1a; select name, depart_name, city from employee e join department d on e.depart_id d.depart_id join location l on d.locat_id l.locat_id; 外连接 注&#xff1a;本图取自博客园大佬"anliux"的博客&#xff0c;原帖链接&#xff1a;【学…

sql靶场5-6关(报错注入)保姆级教程

目录 sql靶场5-6关&#xff08;报错注入&#xff09;保姆级教程 1.第五关 1.步骤一&#xff08;闭合&#xff09; 2.步骤二&#xff08;列数&#xff09; 3.报错注入深解 4.报错注入格式 5.步骤三&#xff08;数据库表名&#xff09; 6.常用函数 7.步骤四&#xff08;表…

矩阵分析-浅要理解(深度学习方向)

梯度分析与最优化 在深度学习的任务中&#xff0c;我们所期望的是训练一个神经网络&#xff0c;使得预测结果与真实标签之间的误差最小化&#xff0c;这可以近似看作是一个提供梯度下降等优化找到全局最优解的凸优化问题。 奇异值分解 在信息工程领域&#xff0c;对数据处理的…

校园安全用电怎么保障?防触电装置来帮您

引言 随着教育设施的不断升级和校园用电需求的日益增长&#xff0c;校园电力系统的安全性和可靠性成为了学校管理的重要课题。三相智能安全配电装置作为一种电力管理设备&#xff0c;其在校园中的应用不仅能够提高电力系统的安全性&#xff0c;还能有效保障师生的用电安全&am…

第十五届蓝桥杯大学B组(握手问题、小球反弹、好数)

一、握手问题 思路1&#xff1a; 1)先让所有人相互握手 第一个人49次 第二个人48次 第五十个人0次 共计01249 2)减去7个没握手的 016 #include<stdio.h> int main() {int a 50*49/2 - 7*6/2;printf("%d\n",a);return 0; } 运行结果&#xf…

【教学类-43-26】20240312 数独4宫格的所有可能(图片版 576套样式,空1格-空8格,每套65534张*576小图=3千万张小图)

背景需求&#xff1a; 之前做了三宫格所有可能图片 510小图*12套6120图&#xff0c;所以3分钟就生成了 【教学类-43-25】20240311 数独3宫格的所有可能&#xff08;图片版 12套样式&#xff0c;空1格-空8格&#xff0c;每套510张&#xff0c;共6120小图&#xff09;-CSDN博客…

如何手动使用下载并且运行 QwQ-32B-GGUF

首先使用安装 pip install ModelScope 使用 ModelScope 下载对应的模型 modelScope download --model Qwen/QwQ-32B-GGUF qwq-32b-q4_k_m.gguf 第二步开始下载 ollama git clone https://githubfast.com/ggerganov/llama.cpp # githubfast.com 可以加速下载 切换到目录&am…

Spring Boot对接twilio发送邮件信息

要在Spring Boot应用程序中对接Twilio发送邮件信息&#xff0c;您可以使用Twilio的SendGrid API。以下是一个简单的步骤指南&#xff0c;帮助您完成这一过程&#xff1a; 1. 创建Twilio账户并获取API密钥 注册一个Twilio账户&#xff08;如果您还没有的话&#xff09;。在Twi…

约束优化技术:KKT条件的完整推导与应用

前言 本文隶属于专栏《机器学习数学通关指南》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见《机器学习数学通关指南》 ima 知识库 知识库广场搜索&#…

对比文章相似度的余弦相似度算法的原理

近期不是项目遇到对比代码的相似度&#xff0c;来判断代码是否存在抄袭嘛。通过研究采用了余弦相似度来对比。既然接触的一个新的东西&#xff0c;怎么也得研究下吧。 一、什么是余弦相似度 利用余弦相似度对比文章相似度的原理&#xff0c;主要基于向量空间模型&#xff0c;通…

DeepSeek结合Mermaid绘图(流程图、时序图、类图、状态图、甘特图、饼图)转载

思维速览&#xff1a; 本文将详细介绍如何利用DeepSeek结合Mermaid语法绘制各类专业图表&#xff0c;帮助你提高工作效率和文档质量。 ▍DeepSeek入门使用请看&#xff1a;deepseek保姆级入门教程&#xff08;网页端使用 本地客户端部署 使用技巧&#xff09; DeepSeek官网…

玩转云服务器——阿里云操作系统控制台体验测评

在云服务器日益普及的背景下&#xff0c;运维人员对操作系统管理工具的要求不断提高。我们需要一款既能直观展示系统状态&#xff0c;又能智能诊断问题&#xff0c;提供专业指导的控制台。阿里云操作系统管理平台正是基于API、SDK、CLI等多种管理方式&#xff0c;致力于提升操作…

Linux 安装 Oh My Zsh

1. 简介 Zsh&#xff08;Z Shell&#xff09;是一款功能强大的 Shell&#xff0c;相比 Bash 提供了更强的 自动补全、命令高亮、插件支持 等功能。而 Oh My Zsh 是一个 Zsh 的增强管理工具&#xff0c;让你可以轻松安装插件和主题&#xff0c;极大提高开发效率。 本教程将详细…

方差,协方差及协方差矩阵的计算

1.方差 方差是用来衡量一组数据的离散程度&#xff0c;数序表达式如下: σ 2 1 N ∑ i 1 N ( x i − μ ) 2 \sigma^2\frac1N\sum_{i1}^N(x_i-\mu)^2 σ2N1​i1∑N​(xi​−μ)2 σ 2 σ^2 σ2表示样本的总体方差&#xff0c; N N N 表示样本总数&#xff0c; x i x _i xi​…