当前位置: 首页 > news >正文

flutter:轮播

前言

介绍几个比较有不错的轮播库

swipe_deck

与轮播沾边,但是更多的是一种卡片式的交互式界面设计。它的主要概念是用户可以通过左右滑动手势浏览不同的卡片,每张卡片上都有不同的信息或功能。

Swipe deck通常用于展示图片、产品信息、新闻文章、社交媒体帖子等。用户可以通过滑动手势快速浏览不同的卡片,并可以选择喜欢的内容进行进一步互动,比如点击卡片获取更多详细信息、分享内容或执行特定的操作。

官方地址
https://pub-web.flutter-io.cn/packages/swipe_deck

安装

flutter pub add swipe_deck

示例

class SwitcherContainerState extends State<SwitcherContainer> {// 图片列表List<String> names = ['a1.jpg', 'a2.jpg', 'a3.jpg'];Widget build(BuildContext context) {return Center(child: SwipeDeck(//  开始位置startIndex: 1,//  空指示器emptyIndicator: const Center(child: Text('Nothing Here'),),//  卡片排列的角度cardSpreadInDegrees: 5,onSwipeLeft: () {print("左滑");},onSwipeRight: () {print("有滑");},onChange: (index) {print("序号:$index");},//列表widgets: names.map((e) => GestureDetector(onTap: () {print("点击了:$e");},child: ClipRRect(borderRadius: BorderRadius.circular(10),child: Image.asset('lib/assets/img/$e',fit: BoxFit.cover,),),)).toList(),),);}
}

在这里插入图片描述
如果想要变成轮播可以设置一个定时器来改变当前激活项,指示器什么的可以自己做一个放在卡片上面。

Card Swiper

用于创建具有卡片式交互界面的滑动效果。它使用类似于左右滑动手势的方式,让用户可以浏览不同的卡片内容。Card Swiper可以用于创建类似于Tinder应用程序的滑动卡片效果,也可以用于展示图片、信息、商品等内容。

官方地址
https://pub-web.flutter-io.cn/packages/card_swiper

安装

flutter pub add card_swiper

示例1

Center(child: Swiper(// 列表数itemCount: 3,itemBuilder: (BuildContext context, int index) {return Image.asset('lib/assets/img/${names[index]}',fit: BoxFit.fill,);},// 页码(指示器)pagination: const SwiperPagination(//  指示器样式,默认是点,可以选择dots、fraction、rect//builder: SwiperPagination.rect,//  也可以使用官方提供的类自定义,有FractionPaginationBuilder、RectSwiperPaginationBuilder、DotSwiperPaginationBuilderbuilder: DotSwiperPaginationBuilder(activeColor: Colors.orange)),//   初始位置index: 0,// 是否自动轮播autoplay: true,),)

在这里插入图片描述
示例2

Center(child: Swiper(// 列表数itemCount: 3,itemBuilder: (BuildContext context, int index) {return Image.asset('lib/assets/img/${names[index]}',fit: BoxFit.fill,);},// 页码(指示器)pagination: const SwiperPagination(//  指示器样式,默认是点,可以选择dots、fraction、rect//builder: SwiperPagination.rect,//  也可以使用官方提供的类自定义,有FractionPaginationBuilder、RectSwiperPaginationBuilder、DotSwiperPaginationBuilderbuilder: DotSwiperPaginationBuilder(activeColor: Colors.orange)),//   初始位置index: 0,// 是否自动轮播autoplay: true,//  布局样式layout: SwiperLayout.TINDER,itemWidth: 240,itemHeight: 300,),)

在这里插入图片描述

相关文章:

flutter:轮播

前言 介绍几个比较有不错的轮播库 swipe_deck 与轮播沾边&#xff0c;但是更多的是一种卡片式的交互式界面设计。它的主要概念是用户可以通过左右滑动手势浏览不同的卡片&#xff0c;每张卡片上都有不同的信息或功能。 Swipe deck通常用于展示图片、产品信息、新闻文章、社…...

高忆管理:股票投资策略是什么?有哪些?

在进行股票买卖过程中&#xff0c;出资者需求有自己的方案和出资战略&#xff0c;并且主张严格遵从出资战略买卖&#xff0c;不要跟风操作。那么股票出资战略是什么&#xff1f;有哪些&#xff1f;下面就由高忆管理为我们剖析&#xff1a; 股票出资战略简略来说便是能够协助出资…...

为公网SSH远程Ubuntu配置固定的公网TCP端口地址主图

文章目录 为公网SSH远程Ubuntu配置固定的公网TCP端口地址 为公网SSH远程Ubuntu配置固定的公网TCP端口地址 在上篇文章中&#xff0c;我们通过cpolar建立的临时TCP数据隧道&#xff0c;成功连接了位于其他局域网下的Ubuntu系统&#xff0c;实现了不同操作系统、不同网络下的系统…...

【前端知识】React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置

React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置 一、实现手动跳转路由 利用 useNavigate 封装一个 withRouter&#xff08;hoc/with_router.js&#xff09; import { useNavigate } from "react-router-dom"; // 封装一个高阶组件 function withRou…...

Qt几种字符类型的相互转换

Qt几种字符类型的相互转换 将const QString转换为const char*将const char*转换为const QStringQstring转换为string把string转换为QstringQt中弹出一个窗口 将const QString转换为const char* #include <QString> #include <iostream>int main() {const QString …...

软件测试员的非技术必备技能

成为软件测试人员所需的技能 非技术技能 以下技能对于成为优秀的软件测试人员至关重要。 将您的技能组合与以下清单进行比较&#xff0c;以确定软件测试是否适合您 - 分析技能&#xff1a;优秀的软件测试人员应具备敏锐的分析能力。 分析技能将有助于将复杂的软件系统分解为…...

渗透测试:Linux提权精讲(二)之sudo方法第二期

目录 写在开头 sudo expect sudo fail2ban sudo find sudo flock sudo ftp sudo gcc sudo gdb sudo git sudo gzip/gunzip sudo iftop sudo hping3 sudo java 总结与思考 写在开头 本文在上一篇博客的基础上继续讲解渗透测试的sudo提权方法。相关内容的介绍与背…...

ansible安装lnmp(集中式)

文章目录 一、安装nginx二、安装mysql三、安装php测试&#xff1a; 一、安装nginx - name: the nginx playhosts: webserversremote_user: roottasks:- name: stop firewalld #关闭防火墙service: namefirewalld statestopped enabledno- name: selinux stopc…...

Tomcat的基本使用,如何用Maven创建Web项目、开发完成部署的Web项目

Tomcat 一、Tomcat简介二、Tomcat基本使用三、Maven创建Web项目3.1 Web项目结构3.2开发完成部署的Web项目3.3创建Maven Web项目3.3.1方式一3.3.2方式二&#xff08;个人推荐&#xff09; 总结 一、Tomcat简介 Web服务器&#xff1a; Web服务器是一个应用程序&#xff08;软件&…...

微信小程序测试要点

一、什么是小程序&#xff1f; 可以将小程序理解为轻便的APP&#xff0c;不用安装就可以使用的应用。用户通过扫一扫或者搜索的方式&#xff0c;就可以打开应用。 小程序最主要的特点是内嵌于微信之中&#xff0c;而使用小程序的目的是为了能够方便用户不在受下载多个APP的烦…...

TCP网络通信编程之netstat

【netstat指令】 【说明】 &#xff08;1&#xff09;Listening 表示某个端口在监听 &#xff08;2&#xff09;如果有一个外部程序&#xff08;客户端&#xff09;连接到该端口&#xff0c;就会显示一条连接信息 &#xff08;3&#xff09;指令netstat -anb 可以参看是那个…...

Stable Diffusion:网页版 体验 / AI 绘图

一、官网地址 Stable Diffusion Online 二、Stable Diffusion AI 能做什么 Stable Diffusion AI绘图是一种基于Stable Diffusion模型的生成式AI技术&#xff0c;能够生成各种类型的图像&#xff0c;包括数字艺术、照片增强和图像修复等。以下是一些可能的应用&#xff1a; …...

一文了解JavaScript 与 TypeScript的区别

TypeScript 和 JavaScript 是两种互补的技术&#xff0c;共同推动前端和后端开发。在本文中&#xff0c;我们将带您快速了解JavaScript 与 TypeScript的区别。 一、TypeScript 和 JavaScript 之间的区别 JavaScript 和 TypeScript 看起来非常相似&#xff0c;但有一个重要的区…...

从更广阔的角度看待产业互联网,它展现的是一次重构的过程

如果产业互联网仅仅只是在传统的供求关系之下&#xff0c;如果产业互联网仅仅只是在传统的平衡之下&#xff0c;缺少了一次对于供求关系的重新建构&#xff0c;那么&#xff0c;所谓的产业互联网&#xff0c;依然是无法跳出以往的发展困境&#xff0c;依然是无法摆脱以往的发展…...

【PHP】简记问题:使用strtotime(‘-1 month‘, time)获取上个月第一天时间戳出错

发生场景 在7月31号是查看统计上个月订单购买总金额&#xff0c;查询结果为0 $preMonthStart strtotime(date(Ym01, strtotime("-1 month"))); $curMonthStart strtotime(date(Ym01)); # 统计上月份实际订单金额 $sql "SELECT count(money) FROM orders WH…...

舌体分割的初步展示应用——依托Streamlit搭建demo

1 前言 去年在社区发布了有关中医舌象诊断的博文&#xff0c;其中舌象识别板块受到了极高的关注和关注。&#x1f60a;最近&#xff0c;我接触到了Python的Streamlit库&#xff0c;它可以帮助数据相关从业人员轻松搭建数据看板。本文将介绍如何使用Streamlit构建舌体分割的演示…...

从Vue层面 - 解析发布订阅模式和观察者模式区别

目录 前言一、发布订阅模式什么是发布订阅模式&#xff1f;应用场景 二、观察者模式1&#xff09;什么是观察者模式&#xff1f;2&#xff09;应用场景3&#xff09;vue中的观察者模式观察者&#xff08;订阅者&#xff09; - Watcher目标者&#xff08;发布者&#xff09; - D…...

面向对象之_多态_1

目录 一. 多态 多态是什么 二. 多态的构成条件 1. 虚函数 2. 虚函数重写&#xff08;隐藏&#xff09; 3. 父类型的引用或者指针调用 4. 多态的特殊情况 1) 子类可以不加 virtual 关键字 2) 协变 三. 关键字 1. virtual 2. final 3. override 四. 多态的原理 1. 虚…...

Spring学习笔记之spring概述

文章目录 Spring介绍Spring8大模块Spring特点 Spring介绍 Spring是一个轻量级的控制反转和面向切面的容器框架 Spring最初的出现是为了解决EJB臃肿的设计&#xff0c;以及难以测试等问题。 Spring为了简化开发而生&#xff0c;让程序员只需关注核心业务的实现&#xff0c;尽…...

旧项目导入Eclipse时文件夹看起来乱七八糟,无从下手的解决办法(无main或webapp等文件夹)

首先&#xff0c;如果没有main或java/resource/webapp等文件夹&#xff0c;那就自己在src下面创建一个&#xff0c;只要对应关系与我下图左边红框一致即可&#xff0c;创建完之后java文件移到java文件夹下&#xff0c;资源文件例如.properties、老项目的数据源定义.INI文件、日…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...