直播软件开发,自动滚动banner

直播软件开发,自动滚动banner实现的相关代码

1
@override<br>  Widget build(BuildContext _buildContext) {<br>    int banLen = _banner.length;<br>    double width = ViewUtils.getScreenWidth(_buildContext);<br>    double curWidth = width * 0.92;<br>    double curHeight = curWidth * 187 / 670;<br>    return (banLen > 0)<br>        ? Container(<br>            margin: EdgeInsets.only(top: ViewUtils.currentHeight(38.0)),<br>            width: width,<br>            height: curHeight,<br>            child: Column(<br>              children: <Widget>[<br>                Expanded(<br>                  flex: 1,<br>                  child: Swiper(<br>                    containerHeight: ViewUtils.currentHeight(100.0),<br>                    controller: SwiperController(),<br>                    itemBuilder: (BuildContext context, int index) {<br>                      return _itemBuilder(index,curWidth,curHeight);<br>                    },<br>                    loop: true,<br>                    duration: 300,<br>                    autoplay: true,<br>                    scrollDirection: Axis.horizontal,<br>                    itemCount: banLen,<br>                    viewportFraction: 0.92,<br>                    // 当前视窗展示比例 小于1可见上一个和下一个视窗<br>                    scale: 0.96, // 两张图片之间的间隔<br>                  ),<br>                ),<br>              ],<br>            ),<br>          )<br>        : Container();<br>  }

​    最后设置圆角

1
_itemBuilder(_index,_curWidth,_curHeight ){<br>    String imgUrl = _banner[_index].imgUrl;<br>    return GestureDetector(<br>      onTap: () {<br>        <br>      },<br>      child: Container(<br>        width: _curWidth,<br>        height: _curHeight,<br>        decoration: BoxDecoration(<br>            gradient: const LinearGradient(<br>                colors: [Color(0xFF819FF5), Color(0xFF4A66E7)]),<br>            borderRadius: BorderRadius.all(<br>              Radius.circular(10),<br>            ),<br>            image: DecorationImage(<br>              image: NetworkImage(imgUrl),<br>              fit: BoxFit.fitWidth,<br>            )),<br>      ),<br>    );<br>  }

以上就是直播软件开发,自动滚动banner实现的相关代码, 更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(35)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示