使用QML实现轮播图

今天下午想试一下用QML实现轮播图,用的是SwipeView和PageIndicator,在实现过程中,我发现会一次性出现2张图片,后来发现只是因为SwipeView这个组件并不是真正一次显示一个组件,所以解决办法就是在给它一个Rectangle作为父组件,并且clip设为true以截断多出来的部分,代码如下。

import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.14

Rectangle {
    id:userwindow;
    //图片地址数组↓
    property var imagelist: ["https://tu1.whhost.net/uploads/20181011/23/1539271568-CDgeBNfqrn.jpg"
                            ,"http://pic.haixia51.com/pic/?p=/qianqianhua/20180518/03/1526585503-fisYUGPeyv.jpg"
                            ,"http://img.juimg.com/tuku/yulantu/110111/292-110111035J3100.jpg"];
    property var i: 0;

//图片组件
    Component{
        id:swipeImage;
        Image{
            asynchronous: true;
        }
    }

    Rectangle{
        id:rect;
        width: parent.width/2;
        height: parent.height/2;
        anchors.top: parent.top;
        anchors.topMargin: 20;
        anchors.horizon
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值