flutter_marquee
flutter 外掛
flutter 跑馬燈 可以指定跑馬燈的方向 可以傳入陣列，可以是自定義的widget 可以控制跑馬燈的時間間隔 控制點選事件等等
效果圖
git
引入:
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),
)
],
),
複製程式碼