flutter跑馬燈

flutter_marquee

flutter 插件

flutter 跑馬燈 能夠指定跑馬燈的方向 能夠傳入數組，能夠是自定義的widget 能夠控制跑馬燈的時間間隔 控制點擊事件等等

效果圖

git

github.com/LiuC520/flu…

引入:

dependencies:
  flutter:
    sdk: flutter
  flutter_marquee:
    git: https://github.com/LiuC520/flutter_marquee.git
複製代碼

屬性

Attribute 屬性	Description 描述
children	自定義的widget組件數組
texts	也能夠傳入 字符串數組
seletedTextColor	當前顯示text的顏色，只有texts有值才生效
textColor	其餘text的顏色，只有texts有值才生效
duration	跑馬燈的切換時長 默認是4秒
itemDuration	單個item的動畫出現或者退出時長 默認是500毫秒
autoStart	是否自動開始動畫
animationDirection	動畫顯示的切換方式，默認是從上往下切換: AnimationDirection.l2r、AnimationDirection.r2l、AnimationDirection.t2b、AnimationDirection.b2t
animateDistance	移動的距離: 若是沒有設置就是默認獲取組件寬高，橫向動畫就是組建的寬度，縱向的就是組件的高度
singleLine	是不是單行顯示: 默認是false
onChange	點擊事件回調: 回調的參數是跑馬燈的widget的下標

Example

一、首先在pubspec.yaml中添加依賴

dependencies:
  flutter:
    sdk: flutter
  flutter_marquee:
    git: https://github.com/flutter_marquee/flutter_marquee.git

複製代碼

import 'package:flutter_marquee/flutter_marquee.dart';


          Column(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Text("從下到上,時間間隔6秒，傳入的是字符串數組"),
                  Container(
                    margin: EdgeInsets.all(4),
                    height: 60,
                    width: 200,
                    decoration: BoxDecoration(
                        border: Border.all(width: 2, color: Colors.red),
                        borderRadius: BorderRadius.all(Radius.circular(8))),
                    child: FlutterMarquee(
                        texts: ["劉成", "劉成1111", "劉成2222", "劉成3333"].toList(),
                        onChange: (i) {
                          print(i);
                        },
                        duration: 4),
                  )
                ],
              ),
              Column(
                children: <Widget>[
                  Text("從上到下,時間間隔8秒,傳入的是自定義的text widget"),
                  Container(
                    margin: EdgeInsets.all(4),
                    height: 60,
                    width: 200,
                    decoration: BoxDecoration(
                        border: Border.all(width: 2, color: Colors.red),
                        borderRadius: BorderRadius.all(Radius.circular(8))),
                    child: FlutterMarquee(
                        children: <Widget>[
                          Text(
                            "劉成",
                            style: TextStyle(color: Colors.red),
                          ),
                          Text("劉成1111", style: TextStyle(color: Colors.green)),
                          Text("劉成2222", style: TextStyle(color: Colors.blue)),
                          Text("劉成3333",
                              style: TextStyle(color: Colors.yellow)),
                        ],
                        onChange: (i) {
                          print(i);
                        },
                        animationDirection: AnimationDirection.t2b,
                        duration: 8),
                  )
                ],
              ),
              Column(
                children: <Widget>[
                  Text("從左到右,時間間隔2秒,自定義的view"),
                  Container(
                    margin: EdgeInsets.all(4),
                    height: 60,
                    width: 200,
                    decoration: BoxDecoration(
                        border: Border.all(width: 2, color: Colors.red),
                        borderRadius: BorderRadius.all(Radius.circular(8))),
                    child: FlutterMarquee(
                        children: <Widget>[
                          Center(
                            child: Row(
                              children: <Widget>[
                                Icon(Icons.menu),
                                Text(
                                  "劉成",
                                  style: TextStyle(color: Colors.green),
                                ),
                              ],
                            ),
                          ),
                          Center(
                            child: Row(
                              children: <Widget>[
                                Icon(Icons.add),
                                Text(
                                  "劉成1111",
                                  style: TextStyle(color: Colors.red),
                                ),
                              ],
                            ),
                          ),
                          Center(
                            child: Row(
                              children: <Widget>[
                                Icon(Icons.satellite),
                                Text(
                                  "劉成2222",
                                  style: TextStyle(color: Colors.blue),
                                ),
                              ],
                            ),
                          ),
                          Center(
                            child: Row(
                              children: <Widget>[
                                Icon(Icons.format_align_justify),
                                Text("劉成3333",
                                    style: TextStyle(color: Colors.yellow)),
                              ],
                            ),
                          ),
                        ],
                        onChange: (i) {
                          print(i);
                        },
                        animationDirection: AnimationDirection.l2r,
                        duration: 2),
                  )
                ],
              ),
              Column(
                children: <Widget>[
                  Text("從右到左,時間間隔6秒"),
                  Container(
                    margin: EdgeInsets.all(4),
                    height: 60,
                    width: 200,
                    decoration: BoxDecoration(
                        border: Border.all(width: 2, color: Colors.red),
                        borderRadius: BorderRadius.all(Radius.circular(8))),
                    child: FlutterMarquee(
                        texts: ["劉成", "劉成1111", "劉成2222", "劉成3333"].toList(),
                        onChange: (i) {
                          print(i);
                        },
                        animationDirection: AnimationDirection.r2l,
                        duration: 6),
                  )
                ],
              ),

複製代碼