Flutter:carousel_slider 横向轮播图、垂直轮播公告栏实现

安装依赖

carousel_slider: ^5.0.0

1、垂直滚动公告栏

在这里插入图片描述

import 'package:carousel_slider/carousel_options.dart';// 垂直滚动公告栏Widget _buildNotice() {return <Widget>[<Widget>[TDImage(assetUrl: "assets/img/home11.png",width: 60.w,height: 60.w,),SizedBox(width: 20.w,),// 可垂直滚动的公告内容SizedBox(width: 490.w,height: 80.w,child: CarouselSlider(items: controller.notices.map((notice) {return TextWidget.body(notice,size: 24.sp,maxLines: 1,overflow: TextOverflow.ellipsis,);}).toList(),options: CarouselOptions(scrollDirection: Axis.vertical,  // 垂直方向滚动height: 80.w,  // 设置高度为文字高度viewportFraction: 1.0,  // 每个item占满整个viewportautoPlay: true,  // 自动播放autoPlayInterval: const Duration(seconds: 3),  // 播放间隔autoPlayAnimationDuration: const Duration(milliseconds: 800),  // 动画时长autoPlayCurve: Curves.easeInOut,  // 动画曲线pauseAutoPlayOnTouch: true,  // 触摸时暂停自动播放enableInfiniteScroll: true,  // 无限滚动),),),SizedBox(width: 40.w,),TDImage(assetUrl: "assets/img/home12.png",width: 28.w,height: 28.w,).onTap(()=>Get.toNamed('/notice_list_page')),].toRow(mainAxisAlignment: MainAxisAlignment.start).paddingHorizontal(20.w).card(color: const Color(0xffFFF9ED)).tight(width: 690.w,height: 80.w)].toRow().card(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))).height(80.w);}final List<String> notices = ['这是第一条公告信息','这是第二条公告信息','这是第三条公告信息',];

2、横向轮播图

在这里插入图片描述

  // 横向轮播图Widget _buildBanner() {return <Widget>[SizedBox(width: 750.w,height: 750.w,child: CarouselSlider(items: [TDImage(assetUrl: 'assets/img/goods.jpg',width: 750.w,height: 750.w,type: TDImageType.square,),TDImage(assetUrl: 'assets/img/goods.jpg',width: 750.w,height: 750.w,type: TDImageType.square,),TDImage(assetUrl: 'assets/img/goods.jpg',width: 750.w,height: 750.w,type: TDImageType.square,),],options: CarouselOptions(scrollDirection: Axis.horizontal,  // 垂直方向滚动height: 750.w,  // 设置高度为文字高度viewportFraction: 1.0,  // 每个item占满整个viewportautoPlay: true,  // 自动播放autoPlayInterval: const Duration(seconds: 3),  // 播放间隔autoPlayAnimationDuration: const Duration(milliseconds: 800),  // 动画时长autoPlayCurve: Curves.easeInOut,  // 动画曲线pauseAutoPlayOnTouch: true,  // 触摸时暂停自动播放enableInfiniteScroll: true,  // 无限滚动onPageChanged: controller.onPageChanged,),),),SliderIndicatorWidget(length: 3, currentIndex: controller.currentIndex,color: AppTheme.colorfff,).positioned(bottom: 30.w,left: 0,right: 0,),].toStack().height(750.w);}// 页码int currentIndex = 0;// 切换页码void onPageChanged(int index, CarouselPageChangedReason reason) {currentIndex = index;update(["goods_detail"]);}

SliderIndicatorWidget 页码组件

import 'package:chenyanzhenxuan/common/index.dart';
import 'package:flutter/material.dart';/// slider indicator 指示器
class SliderIndicatorWidget extends StatelessWidget {/// 个数final int length;/// 当前位置final int currentIndex;/// 颜色final Color? color;/// 是否原型final bool isCircle;/// 对齐方式final MainAxisAlignment alignment;const SliderIndicatorWidget({super.key,required this.length,required this.currentIndex,this.color,this.isCircle = false,this.alignment = MainAxisAlignment.center,});@overrideWidget build(BuildContext context) {Color boxColor = color ?? AppTheme.error;return Row(mainAxisAlignment: alignment,// 采用 list.generate 方式生成 item 项children: List.generate(length, (index) {return Container(margin: const EdgeInsets.symmetric(horizontal: 3),// 圆型宽度 6 , 否则当前位置 15 , 其他位置 8width: !isCircle? currentIndex == index? 15.0: 8: 6,// 圆型高度 6 , 否则 4height: !isCircle ? 4 : 6,decoration: BoxDecoration(// 圆角 4borderRadius: const BorderRadius.all(Radius.circular(4)),// 非当前位置透明度 0.3color: currentIndex == index ? boxColor : boxColor.withOpacity(0.3),),);}),);}
}

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

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

相关文章

# Rust Actix Web 入门指南

Rust Actix Web 入门指南 作者&#xff1a;Joshua Mo 日期&#xff1a;2023年12月15日 概述 Actix Web 入门Actix Web 路由添加数据库Actix Web 应用状态中间件静态文件服务部署总结 时至今日&#xff0c;Actix Web 仍然是 Rust Web 后端生态系统中极其强大的竞争者。尽管经…

图像去雾数据集的下载和预处理操作

前言 目前&#xff0c;因为要做对比实验&#xff0c;收集了一下去雾数据集&#xff0c;并且建立了一个数据集的预处理工程。 这是以前我写的一个小仓库&#xff0c;我决定还是把它用起来&#xff0c;下面将展示下载的路径和数据处理的方法。 下面的代码均可以在此找到。Auo…

C++ 面向对象(继承)

三、继承 3.1 继承的概念 基于一个已有的类 去重新定义一个新的类&#xff0c;这种方式我们叫做继承 关于继承的称呼 一个类B 继承来自 类 A 我们一般称呼 A类&#xff1a;父类 基类 B类: 子类 派生类 B继承自A A 派生了B 示例图的语法 class vehicle // 车类 {}class …

若依报错:无法访问com.ruoyi.common.annotation

无法访问com.ruoyi.common.annotation 若依的父工程的pom文件中设置了jdk为1.8&#xff0c;将idea的jdk也改为1.8即可。

AutoPrompt框架和实操:如何用AutoPrompt完成电影评论和聊天审核任务?

1. AutoPrompt框架概述 1.1 框架定义与目标 AutoPrompt是一个旨在提升和完善用户提示以适应现实世界用例的提示优化框架。该框架通过迭代生成具有挑战性的边缘案例数据集,并相应地优化提示,从而自动生成针对用户意图量身定制的高质量、详细的提示。其核心目标是利用大型语言…

2025美赛数学建模B题思路+模型+代码+论文

2025美赛数学建模A题B题C题D题E题思路模型代码&#xff08;1.24第一时间更新&#xff0c;更新见文末名片&#xff09; 论文数学建模感想 纪念逝去的大学数学建模&#xff1a;两次校赛&#xff0c;两次国赛&#xff0c;两次美赛&#xff0c;一次电工杯。从大一下学期组队到现在…

< OS 有关 > 阿里云:轻量应用服务器 的使用 安装 Tailscale 后DNS 出错, 修复并替换 apt 数据源

VPS 配置 主机&#xff1a;vCPU x2, 512MB, 20GB位置&#xff1a;阿里云&#xff0c;日本.东京OS&#xff1a; ubuntu24.20 原因&#xff1a; 这篇是操作过程的记录文章。 2 个月前&#xff0c; 在阿里云买了台 vps 。当时本想放到韩国&#xff0c;因为它离北京近。 但最便…

小企业品牌塑造之困-中小企实战运营和营销工作室博客

小企业品牌塑造之困-中小企实战运营和营销工作室博客 在商业的广袤天地中&#xff0c;小企业如点点繁星&#xff0c;怀揣着成长为璀璨星辰的梦想。品牌塑造&#xff0c;无疑是它们迈向成功的关键路径。然而&#xff0c;现实却布满荆棘&#xff0c;众多小企业在品牌塑造的征程中…

HTML5 Canvas和JavaScript的3D粒子星系效果

HTML部分 基本结构包括<html>, <head>, 和 <body>标签。<title>标签设置了页面标题为“优化版3D粒子星系”。<style>块定义了一些基本样式&#xff1a; body&#xff1a;无边距&#xff0c;隐藏滚动条&#xff0c;黑色背景&#xff0c;禁用触摸…

65,【5】buuctf web [SUCTF 2019]Upload Labs 2

进入靶场 1,源代码 点击题目时有个就有个admin.php <?php // 引入配置文件 include config.php;class Ad{public $cmd;public $clazz;public $func1;public $func2;public $func3;public $instance;public $arg1;public $arg2;public $arg3;// 构造函数&#xff0c;用于初…

3Dgaussian-splatting部署使用流程

gaussian-splatting 教程目录&#xff1a; 官网地址&#xff1a;https://github.com/graphdeco-inria/gaussian-splatting (https://www.bilibili.com/video/BV1Nz421o71Q/?spm_id_from333.1391.0.0&vd_source79565f57ecbfc6a2349aa6f37d4ec214) 安装前置 1.安装Git&…

BLE透传方案,IoT短距无线通信的“中坚力量”

在物联网&#xff08;IoT&#xff09;短距无线通信生态系统中&#xff0c;低功耗蓝牙&#xff08;BLE&#xff09;数据透传是一种无需任何网络或基础设施即可完成双向通信的技术。其主要通过简单操作串口的方式进行无线数据传输&#xff0c;最高能满足2Mbps的数据传输速率&…

12_PlayerPrefs存储登录窗口逻辑_回调函数优化Lamd表达式

创建 登录窗口LoginWnd.cs 绑定 登录窗口LoginWnd.cs 编写 登录窗口LoginWnd.cs using UnityEngine; using UnityEngine.UI; //输入文本 命名空间 //功能 : 登录注册窗口 public class LoginWnd : MonoBehaviour{public InputField iptAcct;public InputField iptPass;public …

西门子【Library of General Functions (LGF) for SIMATIC S7-1200 / S7-1500】

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 通用函数库 (LGF) 扩展了 TIA Portal 中用于 PLC 编程的 STEP 7 指令&#xff08;数学函数、时间、计数器 等&#xff09;。该库可以不受限制地使用&#xff0c;并包含 FIFO 、搜索功能、矩阵计算、 astro 计…

每日一刷——1.20——准备蓝桥杯

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目一 请统计某个给定范围[L, R]的所有整数中&#xff0c;数字2出现的次数。 比如给定范围[2, 22]&#xff0c;数字2在数2中出现了1次&#xff0c;在数12中出现1次&#xff0c;在数20中出现1次&a…

Cursor 与常见集成开发环境(IDE)的优势对比

Cursor与常见集成开发环境&#xff08;IDE&#xff09;的优势对比 一、AI 辅助编程能力 强大的代码生成功能&#xff1a; Cursor&#xff1a; 以其内置的强大 AI 辅助编程功能为核心优势。用户可以通过输入自然语言描述&#xff0c;快速生成各种编程语言的代码。例如&#xf…

会议签到系统的架构和实现

会议签到系统的架构和实现 摘要:通过定制安卓会议机开机APP呈现签到界面&#xff0c;并且通过W/B结构采集管理签到信息&#xff0c;实现会议签到的功能。为达到此目标本文将探讨使用Redis提供后台数据支持&#xff1b;使用SocketIo处理适时消息&#xff1b;使用Flask进行原型开…

c++ 与 Matlab 程序的数据比对

文章目录 背景环境数据保存数据加载 背景 ***避免数据精度误差&#xff0c;快速对比变量 *** 环境 c下载 https://github.com/BlueBrain/HighFive 以及hdf5库 在vs 中配置库 数据保存 #include <highfive/highfive.hpp> using namespace HighFive;std::string fil…

【go语言】go的卸载与安装

一、卸载go sudo rm -rf /usr/local/go sudo apt-get remove golang sudo apt-get remove golang-go sudo apt-get autoremove wget https://dl.google.com/go/go1.19.linux-amd64.tar.gz sudo tar -xzf go1.19.linux-amd64.tar.gz -C /usr/local go env -w GOPROXY"http…

python3D圣诞树

import pygame import math from pygame.locals import *# 初始化Pygame pygame.init()# 设置屏幕尺寸和标题 width, height 800, 600 screen pygame.display.set_mode((width, height)) pygame.display.set_caption(3D 圣诞树)# 设置颜色 GREEN (34, 139, 34) BROWN (139,…