flutter 垂直滚动实现跑马灯效果的公告提示(Android 中用flipper)

3,845 阅读1分钟

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

class VerticalScrollScene extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(  
      children: <Widget>[
        Padding( // padding 外套个column是为了让height起作用
          padding: const EdgeInsets.only(top:30.0),
          child: Container(
            height: 62,
            color: Colors.white,
            child: CarouselSlider(
              height: 32,
              viewportFraction: 1.0,
              autoPlayInterval: Duration(seconds: 5),
              autoPlay: true,
              scrollDirection: Axis.vertical,
              items: ["11111111111111111111111111111111", "222222222222222222222222222222222222222"].map((info) {
                return Builder(
                  builder: (BuildContext context) {
                    return GestureDetector(
                      child: _carouselItemView(info),
                    );
                  },
                );
              }).toList(),
            ),
          ),
        ),
      ],
    );
  }

  _carouselItemView(String info) {
    return Container(
      child: Text(info, style: TextStyle(fontSize: 15, decorationColor: Colors.white, color: Colors.black),), // 下划线去不掉,就把下划线颜色设置成背景色,相当于去了下划线
    );
  }

}