Flutter ViewPager使用及深刻

官方：Creates a scrollable list that works page by page from an explicit [List]of widgets.

三種使用方式：

• 默認方式
• PageView.builder
• PageView.custom

1. 默認構造函數

適用於比較少的子Widget

PageView({
  Key key,
  this.scrollDirection = Axis.horizontal,
  this.reverse = false,
  PageController controller,
  this.physics,
  this.pageSnapping = true,
  this.onPageChanged,
  List<Widget> children = const <Widget>[],
  this.dragStartBehavior = DragStartBehavior.down,
}
複製代碼

使用

PageView(
  controller: controller,
  onPageChanged: _onPageChanged,
  children: _buildItems(), //滾動的widget
),
複製代碼

在代碼中加入了點的位置指示器，實現的聯動和循環滾動，代碼中比較容易看懂，這裏就再也不多說。

2. PageView.builder

用於建立大量或無限的子控件

PageView.builder({
  ...
  PageController controller,
  this.onPageChanged,
  @required IndexedWidgetBuilder itemBuilder,
  int itemCount,
})
複製代碼

使用

PageView.builder(
    controller: _transController,
    itemCount: widget.viewPagerData.length,
    physics: PageScrollPhysics(parent: BouncingScrollPhysics()),
    itemBuilder: (BuildContext context, int index) {
      return Padding(
        padding: EdgeInsets.symmetric(
          vertical: 16,
          horizontal: 8,
        ),
        child: Image.network(
          widget.viewPagerData[index],
          fit: BoxFit.cover,
        ),
    );
})
複製代碼

3. PageView.custom

PageView.custom({
  ...
  @required this.childrenDelegate,
})
複製代碼

PageView.custom使用基本差很少，後面在其餘例子中給出。

在PageController中能夠獲得滾動 position,當前 page 等信息，其中當前page不是int，而是double，是例如從1滾動到2的時候，會返回中間值，會變化，因此添加以此添加滾動消失動畫。

4. 交互動畫

1. 構建PageView

​ pageview.builder

2. 建立controller

PageController _transController = new PageController();
var _currentPageValue = 0.0;
複製代碼

3. 監聽滾動事件，滾動時，更新數據

_transController.addListener(() {
  setState(() {
    _currentPageValue = _transController.page;
  });
});
複製代碼

4. 自定義ViewPager，添加動畫

首先區分出滑入和滑出的page

if (index == _currentPageValue.floor()) {
    //將要出去的item
  } else if (index == _currentPageValue.floor() + 1) {
    //將要進來的item
  } else {
    //其餘，不在屏幕顯示的item
}
複製代碼

給每一個page包裝上Transform widget

return Transform(
  transform: Matrix4.identity()
    ..rotateX(_currentPageValue - index),
  child: Padding(
    padding: EdgeInsets.symmetric(
      vertical: 16,
      horizontal: 8,
    ),
    child: Image.network(
      widget.viewPagerData[index],
      fit: BoxFit.cover,
    ),
  ),
);
複製代碼

rotateX rotateY rotateZ聯合使用，達到更炫的效果

使用setEntry添加3D效果

return Transform(
    transform: Matrix4.identity()
      ..setEntry(3, 2, 0.004)
      ..rotateX(_entryPageValue - index),
    child: Image.network(
      widget.viewPagerData[index],
      fit: BoxFit.fill,
    ));
複製代碼

以上

git地址：github.com/damengzai/f…

歡迎關注微信公衆號：Flutter入門