Flutter 上下跑马灯

最新推荐文章于 2025-03-12 14:54:10 发布

原创最新推荐文章于 2025-03-12 14:54:10 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#flutter #android #ios

该代码示例展示了如何在Flutter应用中使用flutter_swiper库创建一个垂直滚动的轮播器，包含自动播放和循环功能。页面结构包括AppBar和Scaffold，轮播器显示一串文本数据并支持点击事件。

flutter_swiper: ^1.1.6

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

import '../../../app_routes.dart';
import '../model/common_model.dart';

class AboutPage extends StatefulWidget {
  const AboutPage({super.key});

  @override
  State<AboutPage> createState() => _AboutPageState();
}
final list = [

  '11111',

  '3月1日王女士（卡号5346）成功借款10000',

  '4月3日李女士（卡号3232）成功借款30000',

  '2月6日王先生（卡号4432）成功借款10000',

  '4月2日刘女士（卡号8908）成功借款50000',

  '1月1日张女士（卡号0894）成功借款100000',

  '10月1日陈先生（卡号7233）成功借款80000',

  '9月1日吴女士（卡号7298）成功借款10000',

];

class _AboutPageState extends State<AboutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //title center
      appBar: AppBar(
        backgroundColor: Colors.white,
        //去掉阴影
        elevation: 0,
        // ignore: unnecessary_null_comparison
        leading: context == null
            ? Container()
            : InkWell(
          child: const Icon(
            Icons.arrow_back_ios,
            color: Colors.blue,
            size: 28,
          ),
          onTap: () => Navigator.pop(context),
        ),
        centerTitle: true,
        title: const Text(
          '关于',
          style: TextStyle(color: Colors.black),
        ),
      ),

      body: Container(
        height: 50,
        child:  _marqueeSwiper(),
      )

    );
  }
  Widget _marqueeSwiper() {

    return Container(

      width:300,

//      alignment: Alignment.center,

      child:Swiper(

        itemCount:list.length,

        scrollDirection: Axis.vertical,

        loop:true,

        autoplay:true,

        itemBuilder: (BuildContext context, int index) {

          return InkWell(

              onTap: (){

              },

              child:Container(

                alignment: Alignment.centerLeft,

                child:Text(

                  list[index],

                  style:TextStyle(

                    fontSize:28,

                    color: Colors.red,

                  ),

                  maxLines:1,

                  overflow: TextOverflow.ellipsis,

                ),

              )

          );

        },

      ),

    );

  }
}