使用 Flutter 實現一個走馬燈佈局

ColdStone發表於2019-11-23

效果

走馬燈是一種常見的效果，本文講一下如何用 PageView 在 Flutter 裡實現一個走馬燈, 效果如下，當前頁面的高度比其它頁面高，切換頁面的時候有一個高度變化的動畫。實現這樣的效果主要用到的是 PageView.builder 部件。

開發

建立首頁

首先建立一個 IndexPage 部件，這個部件用來放 PageView，因為需要使用 setState 方法更新 UI，所以它是 stateful 的。

import 'package:flutter/material.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.white,
      ),
      body: Column(
        children: <Widget>[],
      ),
    );
  }
}
複製程式碼

然後在部件內申明一個 _pageIndex 變數用來儲存當前顯示的頁面的 index，在 initState 生命週期裡面初始化一個 PageController 用來配置 PageView 部件。

在 body 的 Column 裡面建立一個 PageView.builder，使用一個 SizedBox 部件指定 PageView 的高度，將 controller 設定為 _pageController，在 onPageChanged 事件裡將當前顯示頁面的 index 值賦值給 _pageIndex 變數。

int _pageIndex = 0;
PageController _pageController;

@override
void initState() {
  super.initState();
  _pageController = PageController(
    initialPage: 0,
    viewportFraction: 0.8,
  );
}

body: Column(
  children: <Widget>[
    SizedBox(
      height: 580.0,
      child: PageView.builder(
        itemCount: 3,
        pageSnapping: true,
        controller: _pageController,
        onPageChanged: (int index) {
          setState(() {
            _pageIndex = index;
          });
        },
        itemBuilder: (BuildContext ctx, int index) {
          return _buildItem(_pageIndex, index);
        },
      ),
    ),
  ],
),
複製程式碼

關鍵點: 設定 PageController 的 viewportFraction 引數小於 1，這個值是用來設定每個頁面在螢幕上顯示的比例，小於 1 的話，就可以在當前頁面同時顯示其它頁面的內容了。
/// The fraction of the viewport that each page should occupy.
/// Defaults to 1.0, which means each page fills the viewport in the scrolling direction.
final double viewportFraction;
複製程式碼

實現 `_buildItem`

接著實現 _buildItem 方法，這個方法就是返回 PageView.builder 裡每一個頁面渲染的內容，第一個引數 activeIndex 是當前顯示在螢幕上頁面的 index，第二個引數 index 是每一項自己的 index。

使用一個 Center 部件讓內容居中顯示，然後用一個 AnimatedContainer 新增頁面切換時的高度變化的動畫效果，切換頁面的時候使用了setState 方法改變了 _pageIndex，Flutter 重新繪製每一項。關鍵點在於判斷當前頁面是否為正在顯示的頁面，是的話它的高度就是 500 不是的話就是 450。

_buildItem(activeIndex, index) {
  return Center(
    child: AnimatedContainer(
      curve: Curves.easeInOut,
      duration: Duration(milliseconds: 300),
      height: activeIndex == index ? 500.0 : 450.0,
      margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
      decoration: BoxDecoration(
        color: heroes[index].color,
        borderRadius: BorderRadius.all(Radius.circular(12.0)),
      ),
      child: Stack(),
    ),
  );
}
複製程式碼

新增內容

然後給 AnimatedContainer 新增每一項的內容

child: Stack(
  fit: StackFit.expand,
  children: <Widget>[
    ClipRRect(
      borderRadius: BorderRadius.all(
        Radius.circular(12.0),
      ),
      child: Image.network(
        heroes[index].image,
        fit: BoxFit.cover,
      ),
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: Row(
        children: <Widget>[
          Expanded(
            child: Container(
              padding: EdgeInsets.all(12.0),
              decoration: BoxDecoration(
                color: Colors.black26,
                borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(12.0),
                  bottomLeft: Radius.circular(12.0),
                ),
              ),
              child: Text(
                heroes[index].title,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
          )
        ],
      ),
    ),
  ],
),
複製程式碼

實現指示器

然後實現頁面的指示器，建立一個 PageIndicator 部件，需要傳入 pageCount 表示總頁數，以及 currentIndex 表示當前顯示的頁數索引。把所有指示器放在一個 Row 部件裡，判斷當前指示器的 index 是否為正在顯示頁面的 index，是的話顯示較深的顏色。

class PageIndicator extends StatelessWidget {
  final int pageCount;
  final int currentIndex;

  const PageIndicator(this.currentIndex, this.pageCount);

  Widget _indicator(bool isActive) {
    return Container(
      width: 6.0,
      height: 6.0,
      margin: EdgeInsets.symmetric(horizontal: 3.0),
      decoration: BoxDecoration(
        color: isActive ? Color(0xff666a84) : Color(0xffb9bcca),
        shape: BoxShape.circle,
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            offset: Offset(0.0, 3.0),
            blurRadius: 3.0,
          ),
        ],
      ),
    );
  }

  List<Widget> _buildIndicators() {
    List<Widget> indicators = [];
    for (int i = 0; i < pageCount; i++) {
      indicators.add(i == currentIndex ? _indicator(true) : _indicator(false));
    }
    return indicators;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: _buildIndicators(),
    );
  }
}
複製程式碼

新增 PageIndicator 到 SizedBox 下面

封裝 `Carousel`

最後的最後優化一下程式碼，把部件封裝一下，讓它成為一個單獨的部件，建立一個 Carousel 部件，對外暴露 items 和 height 兩個屬性，分別配置資料和高度。

class Carousel extends StatefulWidget {
  final List items;
  final double height;

  const Carousel({
    @required this.items,
    @required this.height,
  });

  @override
  _CarouselState createState() => _CarouselState();
}

class _CarouselState extends State<Carousel> {
  int _pageIndex = 0;
  PageController _pageController;

  Widget _buildItem(activeIndex, index) {
    final items = widget.items;

    return Center(
      child: AnimatedContainer(
        curve: Curves.easeInOut,
        duration: Duration(milliseconds: 300),
        height: activeIndex == index ? 500.0 : 450.0,
        margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
        decoration: BoxDecoration(
          color: items[index].color,
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
        ),
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.all(
                Radius.circular(12.0),
              ),
              child: Image.network(
                items[index].image,
                fit: BoxFit.cover,
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.all(12.0),
                      decoration: BoxDecoration(
                        color: Colors.black26,
                        borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(12.0),
                          bottomLeft: Radius.circular(12.0),
                        ),
                      ),
                      child: Text(
                        items[index].title,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 20.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      initialPage: 0,
      viewportFraction: 0.8,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: widget.height,
          child: PageView.builder(
            pageSnapping: true,
            itemCount: heroes.length,
            controller: _pageController,
            onPageChanged: (int index) {
              setState(() {
                _pageIndex = index;
              });
            },
            itemBuilder: (BuildContext ctx, int index) {
              return _buildItem(_pageIndex, index);
            },
          ),
        ),
        PageIndicator(_pageIndex, widget.items.length),
      ],
    );
  }
}
複製程式碼

之後在 IndexPage 部件裡就只用例項化一個 Carousel 了，同時由於 IndexPage 不用管理部件狀態了，可以將它變成 StatelessWidget。

完整程式碼

import 'package:flutter/material.dart';

class Hero {
  final Color color;
  final String image;
  final String title;

  Hero({
    @required this.color,
    @required this.image,
    @required this.title,
  });
}

List heroes = [
  Hero(
    color: Color(0xFF86F3FB),
    image: "https://game.gtimg.cn/images/lol/act/img/skin/big22009.jpg",
    title: '寒冰射手-艾希',
  ),
  Hero(
    color: Color(0xFF7D6588),
    image: "https://game.gtimg.cn/images/lol/act/img/skin/big39006.jpg",
    title: '刀鋒舞者-艾瑞莉婭',
  ),
  Hero(
    color: Color(0xFF4C314D),
    image: "https://game.gtimg.cn/images/lol/act/img/skin/big103015.jpg",
    title: '九尾妖狐-阿狸',
  ),
];

class Carousel extends StatefulWidget {
  final List items;
  final double height;

  const Carousel({
    @required this.items,
    @required this.height,
  });

  @override
  _CarouselState createState() => _CarouselState();
}

class _CarouselState extends State<Carousel> {
  int _pageIndex = 0;
  PageController _pageController;

  Widget _buildItem(activeIndex, index) {
    final items = widget.items;

    return Center(
      child: AnimatedContainer(
        curve: Curves.easeInOut,
        duration: Duration(milliseconds: 300),
        height: activeIndex == index ? 500.0 : 450.0,
        margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
        decoration: BoxDecoration(
          color: items[index].color,
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
        ),
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.all(
                Radius.circular(12.0),
              ),
              child: Image.network(
                items[index].image,
                fit: BoxFit.cover,
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.all(12.0),
                      decoration: BoxDecoration(
                        color: Colors.black26,
                        borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(12.0),
                          bottomLeft: Radius.circular(12.0),
                        ),
                      ),
                      child: Text(
                        items[index].title,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 20.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      initialPage: 0,
      viewportFraction: 0.8,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: widget.height,
          child: PageView.builder(
            pageSnapping: true,
            itemCount: heroes.length,
            controller: _pageController,
            onPageChanged: (int index) {
              setState(() {
                _pageIndex = index;
              });
            },
            itemBuilder: (BuildContext ctx, int index) {
              return _buildItem(_pageIndex, index);
            },
          ),
        ),
        PageIndicator(_pageIndex, widget.items.length),
      ],
    );
  }
}

class PageIndicator extends StatelessWidget {
  final int currentIndex;
  final int pageCount;

  const PageIndicator(this.currentIndex, this.pageCount);

  Widget _indicator(bool isActive) {
    return Container(
      width: 6.0,
      height: 6.0,
      margin: EdgeInsets.symmetric(horizontal: 3.0),
      decoration: BoxDecoration(
        color: isActive ? Color(0xff666a84) : Color(0xffb9bcca),
        shape: BoxShape.circle,
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            offset: Offset(0.0, 3.0),
            blurRadius: 3.0,
          ),
        ],
      ),
    );
  }

  List<Widget> _buildIndicators() {
    List<Widget> indicators = [];
    for (int i = 0; i < pageCount; i++) {
      indicators.add(i == currentIndex ? _indicator(true) : _indicator(false));
    }
    return indicators;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: _buildIndicators(),
    );
  }
}

class IndexPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.white,
      ),
      body: Carousel(
        height: 540,
        items: heroes,
      ),
      backgroundColor: Colors.white,
    );
  }
}
複製程式碼

至此，整個佈局就完成了！ ?

部落格地址

純JS實現走馬燈
2018-09-21
JS
使用 yogaKit 實現一個資訊流佈局
2018-07-13
TextView走馬燈
2020-11-03
TextView
flutter跑馬燈
2018-12-06
Flutter
Flutter 跑馬燈
2019-02-12
Flutter
Flutter實現Android跑馬燈及滾動廣告
2020-04-17
FlutterAndroid
Android 實現一個通用的圓角佈局
2019-03-03
Android
CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局
2018-03-20
CSSFlex
Flutter一步步實現x程GridNav網格佈局_hotel佈局與完結
2020-04-10
Flutter
Flutter 佈局
2021-07-16
Flutter
使用 CSS columns 佈局來實現自動分組佈局
2024-05-06
CSS
flutter系列之:在flutter中使用流式佈局
2022-11-28
Flutter
Flutter 佈局（一）- Container詳解
2018-06-03
FlutterAI
Flutter實戰之基本佈局篇
2019-08-07
Flutter
Flutter 常用佈局
2021-03-19
Flutter
Flutter | 佈局元件
2021-03-02
Flutter元件
佈局總結-水平居中佈局的實現
2019-02-16
簡單實現跑馬燈案例
2019-10-09
Grid 拖拽佈局實現
2023-12-02
Flutter 佈局詳解
2018-05-27
Flutter
flutter瀑布流佈局
2024-09-04
Flutter
Flutter 佈局真經
2021-03-30
Flutter
聖盃佈局進階版-flex佈局實現
2019-04-20
Flex
一種子圖佈局方法的實現
2022-03-15
在Flutter裡實現一個開心農場地塊佈局！Web前端工程師也可以看看，作為Flutter入門。
2021-08-17
FlutterWeb前端工程師
「前端面試題系列2」如何實現一個聖盃佈局？
2019-01-14
前端面試題
實現一個上下固定，中間自動填滿的佈局
2024-11-29
如何使用Flexbox和CSS Grid，實現高效佈局
2021-09-09
FlexCSS
簡單專案實戰flutter（佈局篇）
2019-04-10
Flutter
Flutter 應用程式佈局的最佳實踐
2022-03-20
Flutter
Flutter學習：什麼是Container以及佈局約束的實現
2021-06-01
FlutterAI
用js寫的一個跑馬燈
2020-04-06
JS
Vue.js+Element-UI走馬燈圖片自適應實踐
2021-01-01
Vue.jsUI
Flutter佈局篇（1）–水平和垂直佈局詳解
2019-03-03
Flutter
Flutter佈局篇（1）--水平和垂直佈局詳解
2018-10-10
Flutter
jQuery實現瀑布流佈局
2020-06-10
jQuery
flutter佈局-1-column
2018-11-07
Flutter
flutter佈局-2-row
2018-11-07
Flutter