flutter_marquee

flutter 插件

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

效果圖

QQ20181206-234225.gif

git

https://github.com/LiuC520/flutter_marquee

引入:

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

1、首先在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), ) ], ),

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/17572.html