快捷導(dǎo)航

Flutter輪播圖效果的實(shí)現(xiàn)步驟

更新時(shí)間：2020年07月02日 11:01:44 作者：Jeff.Zhong

這篇文章主要介紹了Flutter輪播圖效果的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前端開(kāi)發(fā)當(dāng)中最有意思的就是實(shí)現(xiàn)動(dòng)畫(huà)特效，Flutter提供的各種動(dòng)畫(huà)組件可以方便實(shí)現(xiàn)各種動(dòng)畫(huà)效果。Flutter中的動(dòng)畫(huà)組件主要分為兩類：

隱式動(dòng)畫(huà)控件：只需設(shè)置組件開(kāi)始值，結(jié)束值，執(zhí)行時(shí)間，比如AnimatedOpacity，AnimatedSize等組件。
顯式動(dòng)畫(huà)控件：需要設(shè)置AnimationController，手動(dòng)控制動(dòng)畫(huà)的執(zhí)行。顯式動(dòng)畫(huà)可以完成隱式動(dòng)畫(huà)的效果，甚至更加地可控和靈活，不過(guò)需要管理該動(dòng)畫(huà)的AnimationController生命周期，AnimationController并不是一個(gè)控件，所以需要將其放在StatefulWidget中。

不難看出，隱式動(dòng)畫(huà)控件封裝程度更高，無(wú)需管理AnimationController的生命周期，代碼因此更簡(jiǎn)單，我們開(kāi)發(fā)時(shí)應(yīng)該盡量選用隱式動(dòng)畫(huà)控件。接著我們就用隱式動(dòng)畫(huà)控件來(lái)實(shí)現(xiàn)在web當(dāng)中很常見(jiàn)的輪播圖。

FadeIn/FadeOut

AnimatedOpacity顧名思義就是專門(mén)設(shè)置opacity屬性值變化的動(dòng)畫(huà)組件，其實(shí)就是類似css3 中的 transition: opacity time，該動(dòng)畫(huà)組件可以實(shí)現(xiàn)漸隱漸現(xiàn)動(dòng)畫(huà)，下面就是實(shí)現(xiàn)步驟：

創(chuàng)建StatefulWidget；
定義組件屬性，zIndex（類似css的z-index），樣式列表list，時(shí)間timer（實(shí)現(xiàn)js的setTimeout和setInterval）；
實(shí)現(xiàn)動(dòng)畫(huà)播放的autoPlay功能，在initState方法中啟動(dòng)自動(dòng)播放的動(dòng)畫(huà)，記得在dispose方法回收timer相關(guān)資源；
布局中Stack和Positioned組件就是實(shí)現(xiàn)html中 positon: relative/absolute布局；
AnimatedOpacity 組件中的opacity是必須設(shè)置的屬性，curve屬性與css3中動(dòng)畫(huà)函數(shù)一樣，duration 就是動(dòng)畫(huà)持續(xù)的時(shí)間。

class OpacityBanner extends StatefulWidget {
 @override
 _OpacityBannerState createState() => _OpacityBannerState();
}

class _OpacityBannerState extends State<OpacityBanner> {
 int zIndex = 0;
 List<String> list = ['ff0000', '00ff00', '0000ff', 'ffff00'];
 Timer timer;

 //setInterval控制當(dāng)前動(dòng)畫(huà)元素的下標(biāo)，實(shí)現(xiàn)動(dòng)畫(huà)輪播
 autoPlay() {
 var second = const Duration(seconds: 2);
 timer = Timer.periodic(second, (t) {
  setState(() {
  zIndex = (++zIndex) % list.length;
  });
 });
 }

 @override
 void initState() {
 super.initState();
 timer = Timer(Duration(seconds: 2), autoPlay);
 }

 @override
 void dispose() {
 if (timer != null) timer.cancel();
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Stack(alignment: Alignment.center, children: [
  Stack(
   children: list
    .asMap()
    .keys
    .map<Widget>((i) => AnimatedOpacity(
     curve: Curves.easeIn,
     duration: Duration(milliseconds: 600),
     opacity: i == zIndex ? 1 : 0,
     child: Container(
      color: Color(int.parse(list[i], radix: 16)).withAlpha(255),
      height: 300, //100%
     ),
     ))
    .toList()),
  Positioned(
   bottom: 20,
   child: Row(
    children: list
     .asMap()
     .keys
     .map((i) => Container(
      width: 10,
      height: 10,
      margin: EdgeInsets.symmetric(horizontal: 5),
      decoration:
       BoxDecoration(color: i == zIndex ? Colors.blue : Colors.grey, shape: BoxShape.circle)))
     .toList()))
 ]));
 }
}

怎么樣？實(shí)現(xiàn)起來(lái)非常簡(jiǎn)單吧。

SlideIn/SlideOut

接著我們使用AnimatedContainer實(shí)現(xiàn)移入/移出動(dòng)畫(huà)，同時(shí)加上touch事件實(shí)現(xiàn)手指左右滑動(dòng)控制輪播圖。實(shí)現(xiàn)的步驟和上面的一樣，這里只介紹用到不同組件的地方：

移入移出動(dòng)畫(huà)和上面漸隱動(dòng)畫(huà)不同的是要同時(shí)控制兩個(gè)動(dòng)畫(huà)元素，分別是移出和移入的元素，使用屬性curr和next下標(biāo)表示。

AnimatedContainer組件可以控制很多的屬性，可以說(shuō)是實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)最常用的組件了。我們這里只需要設(shè)置transform屬性即可，控制動(dòng)畫(huà)的屬性上面已經(jīng)介紹過(guò)。
MediaQuery 可以查詢很多全局的屬性，比如高度/寬度，dpr等。
GestureDetector是一個(gè)事件的包裝器，這里使用到了onHorizontalDragStart，onHorizontalDragUpdate，onHorizontalDragEnd這三個(gè)事件，即橫向拖動(dòng)相關(guān)的事件。

class SlideBanner extends StatefulWidget {
 @override
 _SlideBannerState createState() => _SlideBannerState();
}

class _SlideBannerState extends State<SlideBanner> {
 List<String> list = [
 'https://upload-images.jianshu.io/upload_images/127924-dec37275411437de.jpg',
 '//upload-images.jianshu.io/upload_images/127924-0999617a887bb6a3.jpg',
 '//upload-images.jianshu.io/upload_images/127924-b48e22b6aef713ae.jpg',
 '//upload-images.jianshu.io/upload_images/127924-b06e44e6a17caf43.jpg'
 ];
 double dx = 0;//距離
 int curr = 0;//要移出的下標(biāo)
 int next = 0;//要移入的下標(biāo)
 bool toLeft = true;//自動(dòng)播放的方向，默認(rèn)向左
 Timer timer;

 /** 輪播圖滑動(dòng)相關(guān) **/
 dragStart(Offset offset) {
 dx = 0;
 }

 //累計(jì)位移距離
 dragUpdate(Offset offset) {
 var x = offset.dx;
 dx += x;
 }
	
 //達(dá)到一定距離后則觸發(fā)輪播圖左右滑動(dòng)
 dragEnd(Velocity v) {
 if (dx.abs() < 20) return;
 timer.cancel();
 if (dx < 0) {
  //向左
  if (!toLeft) {
  setState(() {
   toLeft = true;
   curr = next - 1 < 0 ? list.length - 1 : next - 1;
  });
  }
  setState(() {
  curr = next;
  next = (++next) % list.length;
  });
 } else {
  //向右
  if (toLeft) {
  setState(() {
   toLeft = false;
   curr = (next + 1) % list.length;
  });
  }
  setState(() {
  curr = next;
  next = --next < 0 ? list.length - 1 : next;
  });
 }
 //setTimeout
 timer = Timer(Duration(seconds: 2), autoPlay);
 }

 autoPlay() {
 var second = const Duration(seconds: 2);
 timer = Timer.periodic(second, (t) {
  setState(() {
  toLeft = true;
  curr = next;
  next = (++next) % list.length;
  });
 });
 }

 @override
 void initState() {
 super.initState();
 timer = Timer(Duration(seconds: 2), autoPlay);
 }

 @override
 void dispose() {
 if (timer != null) timer.cancel();
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 final size = MediaQuery.of(context).size;
 final width = size.width;
 return Scaffold(
  body: GestureDetector(
   onHorizontalDragStart: (details) => dragStart(details.globalPosition),
   onHorizontalDragUpdate: (details) => dragUpdate(details.delta),
   onHorizontalDragEnd: (details) => dragEnd(details.velocity),
   child: Stack(
    children: list
     .asMap()
     .keys
     .map((i) => AnimatedContainer(
      duration: Duration(milliseconds: (i == next || i == curr) ? 600 : 0),
      curve: Curves.easeIn,
      transform: Matrix4.translationValues(
       i == next ? 0 : i == curr ? (toLeft ? -width : width) : (toLeft ? width : -width), 0, 0),
      width: width,
      height: 300,
      child: Image.network(list[i], width: width, height:double.infinity ,fit: BoxFit.cover)))
     .toList())));
 }
}

到此這篇關(guān)于Flutter輪播圖效果的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)Flutter輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: