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占满整个viewport
              autoPlay: true,  // 自动播放
              autoPlayInterval: const