Qt自定义控件之Carousel

最新推荐文章于 2024-06-07 13:01:43 发布
最新推荐文章于 2024-06-07 13:01:43 发布
阅读量167 收藏
点赞数 1
文章标签： qt 自定义控件 Carousel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t13506920069/article/details/138898526
版权

效果

在这里插入图片描述
在这里插入图片描述

说明

  最近项目正好要用到轮播走马灯，拿了许多年前的代码改了下。可能还有BUG，有发现的欢迎留言。
  使用说明和代码放下方码云链接。

代码

码云传送门

屁股大象
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Mac Technology Overview】（四） Media Layer
伊织的Notebook
12-22 314
【Mac Technology Overview】（四） Media Layer 文章目录【Mac Technology Overview】（四） Media Layer一、概述二、Supported Media Formats 支持的媒体格式三、Graphics Technologies 图像技术1、Graphics and Drawing 图像和会话1.1 Cocoa Drawing Coco...
3DCarousel：具有鼠标控件的3D Carousel
01-28
3DCarousel：具有鼠标控件的3D Carousel
flutter_carousel_slider：颤动轮播小部件，支持无限滚动和自定义子部件
02-20
carousel_slider 轮播滑块控件。 特征 无限滚动 自定义子小部件 自动播放 支持平台 Flutter Android Flutter iOS 颤振网 颤振桌面 实时预览 注意：此页面使用flutter-web构建。 为了获得更好的用户体验，请使用移动设备打开此链接。 安装 将carousel_slider: ^3.0.0添加到pubspec.yaml依赖项。 并导入： import 'package:carousel_slider/carousel_slider.dart' ; 如何使用 只需创建一个CarouselSlider小部件，然后传递所需的参数： CarouselSlider ( options : CarouselOptions (height : 400.0 ), items : [ 1 , 2 , 3 , 4 , 5 ]. map ((i)
vue Carousel 实现分页.vue
04-24
Ant Design of Vue Carousel 走马灯 实现简单的分页效果demo 内容简单
应用源码之CarouselDemo.zip
04-21
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台
Carousel.js
08-22
bootstrap框架插件Carousel.js，图片轮播插件。bootstrap的carousel.js可实现轮播图动画。
Panuon.UI.Silver – 开源C# WPF控件库
zyq_0719的博客
01-14 2419
Panuon.UI.Silver – 开源C# WPF控件库 Dotnet9•2019年12月13日 22:55•WPF•阅读 12145 时间如流水，只能流去不流回！ 点赞再看，养成习惯，这是您给我创作的动力！ 本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。 本文介绍分两部分：...
《Dotnet9》系列-开源C# WPF控件库3《HandyControl》强力推荐
Unknowncheats的博客
04-21 1297
时间如流水，只能流去不流回！ 点赞再看，养成习惯，这是您给我创作的动力！ 本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。 历经3个白天2个黑夜（至凌晨2点），Dotnet9小编经过反复修改、润色，终于完成此文编写（本文略长，手机党请考虑流量），小编我真的不容易呀，下图是博客园首页推荐：https:/...
《Dotnet9》系列-开源C# WPF控件库2《Panuon.UI.Silver》强力推荐
Globalizationa的博客
04-21 229
时间如流水，只能流去不流回！ 点赞再看，养成习惯，这是您给我创作的动力！ 本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。 今天站长(Dotnet9，站长网址：https://dotnet9.com, 微信公众号：dotnet9_com)推荐另一款开源的WPF控件库(PanuonUI.Silver，gi..
Bootstrap响应式布局
你好啊cbw
03-07 2261
目录 1.什么是 Bootstrap？ 2.为什么使用 Bootstrap？ 3.Bootstrap 包的内容 4.Bootstrap的安装与使用 5.Bootstarp Css 5.1.Bootstrap-按钮 5.1.1.按钮样式 5.1.2.按钮大小 5.1.3.按钮状态 5.1.4.按钮标签 5.2.Bootstrap-表格 5.2.1.表格类 5.2.2., 和 类 5.2.3.基本的表格 5.2.4.条纹表格 5.2.5.边框表格 5.2.6.悬停表格 5.2
javascript开源大全
weixin_30595035的博客
07-02 3108
javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的JavaScript脚本-Node.js jQuery图表插件-jQchart HTML5-开发框架-jQuery-Mobile 跨浏览器的RIA框架-ExtJ...
lxml和JsonPath的使用案例
dremcl的博客
03-17 3515
python中lxml的使用案例 首先是某一网页的html文件： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="referrer" content=...
C++使用QtHttpServer开发服务端Server的Http POST接口和客户端Client示例
_XLinC_的专栏
06-04 366
【代码】C++使用QtHttpServer开发服务端Server的Http POST接口和客户端Client示例。
浅谈Qt：跨平台开发的现在与未来
吻等离子的博客
06-02 1082
Qt作为一个成熟的跨平台开发框架，拥有强大的功能和广泛的应用领域。尽管面临着市场竞争和一些挑战，但Qt仍然具有巨大的潜力和优势。通过持续的创新、社区建设、教育培训和行业合作，Qt有望在未来的跨平台开发中继续扮演重要角色。对于开发者来说，学习和掌握Qt技术，无疑能够为自己的职业发展增加竞争力。
解决QT的无界面程序，Ctrl+C无法触发析构函数的问题
Alon1787的博客
06-03 343
解决QT的无界面程序，Ctrl+C无法触发析构函数的问题
VS2022+Qt雕刻机单片机马达串口上位机控制系统
最新发布
alicema1111的博客
06-07 711
这篇博客针对《VS2022+Qt雕刻机单片机马达串口上位机控制系统》编写代码，代码整洁，规则，易读。 学习与应用推荐首选。
Qt Window Dialog 无标题栏 ，无边框，可拖动
q610098308的专栏
06-04 309
Qt Window Dialog 无标题栏 ，无边框，可拖动
QT:QML中使用Loader加载界面
qq_48597462的博客
06-03 488
在QML中使用Loader加载界面，可以带来诸多好处，如提高应用程序的启动速度、动态地改变界面内容、根据条件加载不同的组件、更有效地使用内存以及帮助分割应用逻辑等。1.延迟加载：QML Loader允许开发者在需要时才加载组件，而不是在应用程序启动时一次性加载所有组件。这样可以加快应用程序的启动时间，因为它只需要初始化用户当前需要看到的部分。2.动态内容：Loader可以在运行时加载不同的QML文件或组件，这样可以根据用户的操作或应用程序的状态来改变界面的内容。3.条件加载。
写一个旋转木马自定义控件
06-07
好的，我可以给您提供一个简单的旋转木马自定义控件的实现。这个控件可以显示一组图片，并支持手势滑动和点击事件。以下是实现步骤： 1. 定义 CarouselItem 类，用于表示旋转木马中的每个项目。该类应该包含一个 ImageView 和一些用于描述该项目的元数据（如标题、描述等）。 ```java public class CarouselItem { private String title; private String description; private int imageResId; // 构造函数和 getter/setter 方法 // ... } ``` 2. 创建一个继承自 ViewGroup 的自定义控件类 CarouselView。该类应该包含一个 List<CarouselItem> 成员变量，用于存储所有的项目，以及一个 int 类型的成员变量 currentIndex，表示当前选中的项目的索引。 ```java public class CarouselView extends ViewGroup { private List<CarouselItem> items; private int currentIndex; // 构造函数和一些初始化方法 // ... @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 测量子视图的大小 // ... } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // 安排子视图的位置 // ... } @Override public boolean onTouchEvent(MotionEvent event) { // 处理手势滑动事件 // ... } } ``` 3. 在 CarouselView 中添加一个方法 loadItems(List<CarouselItem> items)，用于加载所有的项目，并将它们添加到该控件中。在该方法中，我们可以创建一个 ImageView 和一些 TextView，用于显示每个项目的元数据，并将它们包装成一个 CarouselItem 对象。然后，我们可以将所有的 CarouselItem 对象添加到一个 List 中，并调用 requestLayout() 方法来重新布局子视图。 ```java public void loadItems(List<CarouselItem> items) { this.items = items; removeAllViews(); for (CarouselItem item : items) { ImageView imageView = new ImageView(getContext()); imageView.setImageResource(item.getImageResId()); addView(imageView); TextView titleView = new TextView(getContext()); titleView.setText(item.getTitle()); addView(titleView); TextView descView = new TextView(getContext()); descView.setText(item.getDescription()); addView(descView); } // 重新布局子视图 requestLayout(); } ``` 4. 在 CarouselView 中添加一个方法 setCurrentIndex(int index)，用于设置当前选中的项目的索引。在该方法中，我们可以根据 currentIndex 和 index 的差值，计算出需要旋转的角度，并使用 ViewPropertyAnimator 来执行旋转动画。 ```java public void setCurrentIndex(int index) { int diff = index - currentIndex; if (diff == 0) { return; } float angle = -diff * 45.0f; // 每个项目旋转 45 度 animate().rotationBy(angle) .setDuration(200) .start(); currentIndex = index; } ``` 5. 最后，我们可以在 CarouselView 中添加一个接口 OnItemClickListener，用于监听项目的点击事件。在 onTouchEvent() 方法中，当用户手指离开屏幕时，我们可以根据手指移动的距离和方向，来确定当前选中的项目，并调用 setCurrentIndex() 方法来设置当前选中的项目的索引。在 performClick() 方法中，我们可以调用 OnItemClickListener 的回调方法来通知外部代码，用户已经点击了某个项目。 完整的代码实现如下： ```java public class CarouselView extends ViewGroup { private List<CarouselItem> items; private int currentIndex; private float startX; private float startY; private OnItemClickListener onItemClickListener; public CarouselView(Context context) { super(context); init(); } public CarouselView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CarouselView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { items = new ArrayList<>(); currentIndex = 0; setClickable(true); } public void loadItems(List<CarouselItem> items) { this.items = items; removeAllViews(); for (CarouselItem item : items) { ImageView imageView = new ImageView(getContext()); imageView.setImageResource(item.getImageResId()); addView(imageView); TextView titleView = new TextView(getContext()); titleView.setText(item.getTitle()); addView(titleView); TextView descView = new TextView(getContext()); descView.setText(item.getDescription()); addView(descView); } requestLayout(); } public void setCurrentIndex(int index) { int diff = index - currentIndex; if (diff == 0) { return; } float angle = -diff * 45.0f; // 每个项目旋转 45 度 animate().rotationBy(angle) .setDuration(200) .start(); currentIndex = index; } public void setOnItemClickListener(OnItemClickListener listener) { onItemClickListener = listener; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); int childWidth = (int) (width * 0.6f); int childHeight = (int) (childWidth * 1.2f); for (int i = 0; i < getChildCount(); i++) { View child = getChildAt(i); child.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY)); } setMeasuredDimension(width, height); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int centerX = (r - l) / 2; int centerY = (b - t) / 2; int radius = (int) (Math.min(centerX, centerY) * 0.8f); int count = getChildCount(); for (int i = 0; i < count; i++) { View child = getChildAt(i); int x = centerX + (int) (radius * Math.sin(i * Math.PI / 3)); int y = centerY + (int) (radius * Math.cos(i * Math.PI / 3)); int left = x - child.getMeasuredWidth() / 2; int top = y - child.getMeasuredHeight() / 2; int right = left + child.getMeasuredWidth(); int bottom = top + child.getMeasuredHeight(); child.layout(left, top, right, bottom); } } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: startX = event.getX(); startY = event.getY(); break; case MotionEvent.ACTION_UP: float endX = event.getX(); float endY = event.getY(); float dx = endX - startX; float dy = endY - startY; if (Math.abs(dx) < 10 && Math.abs(dy) < 10) { performClick(); int count = getChildCount(); for (int i = 0; i < count; i++) { View child = getChildAt(i); if (child instanceof ImageView) { int[] loc = new int[2]; child.getLocationOnScreen(loc); Rect rect = new Rect(loc[0], loc[1], loc[0] + child.getWidth(), loc[1] + child.getHeight()); if (rect.contains((int) endX, (int) endY)) { if (onItemClickListener != null) { onItemClickListener.onItemClick(i / 3); // 每个项目占用 3 个子视图 } break; } } } } else { if (dx > 0) { setCurrentIndex(currentIndex - 1); } else { setCurrentIndex(currentIndex + 1); } } break; } return true; } @Override public boolean performClick() { return super.performClick(); } public interface OnItemClickListener { void onItemClick(int index); } } ``` 这个控件的用法非常简单。首先，您需要创建一个 CarouselItem 的列表，用于存储所有的项目。然后，您可以创建一个 CarouselView 对象，并调用它的 loadItems() 方法来加载项目。最后，您可以使用 setOnItemClickListener() 方法来监听项目的点击事件。 ```java CarouselView carouselView = findViewById(R.id.carousel_view); List<CarouselItem> items = new ArrayList<>(); items.add(new CarouselItem("Title 1", "Description 1", R.drawable.image1)); items.add(new CarouselItem("Title 2", "Description 2", R.drawable.image2)); items.add(new CarouselItem("Title 3", "Description 3", R.drawable.image3)); carouselView.loadItems(items); carouselView.setOnItemClickListener(new CarouselView.OnItemClickListener() { @Override public void onItemClick(int index) { // 处理项目的点击事件 } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值