Flutter開發Widgets 之 PageView使用範例

2022-10-10 14:01:26

構造方法以及引數：

PageView可用於Widget的整屏滑動切換，如當代常用的短視訊APP中的上下滑動切換的功能，也可用於橫向頁面的切換，如APP第一次安裝時的引導頁面，也可用於開發輪播圖功能.

  PageView({
    Key? key,
    this.scrollDirection = Axis.horizontal, // 設定捲動方向 垂直 / 水平 
    this.reverse = false,	// 反向捲動 
    PageController? controller,	// 捲動控制類 
    this.physics,	// 捲動邏輯 , 不捲動 / 捲動 / 捲動到邊緣是否反彈 
    this.pageSnapping = true,	// 如果設定 false , 則無法進行頁面手勢捕捉 
    this.onPageChanged, 	// 頁面切換時回撥該函數 
    List<Widget> children = const <Widget>[],
    this.dragStartBehavior = DragStartBehavior.start,
    this.allowImplicitScrolling = false,
    this.restorationId,
    this.clipBehavior = Clip.hardEdge,
  }) : assert(allowImplicitScrolling != null),
       assert(clipBehavior != null),
       controller = controller ?? _defaultPageController,
       childrenDelegate = SliverChildListDelegate(children),
       super(key: key);

具體引數說明：

scrollDirection主要是捲動的方向即horizontal(水平)和vertical(垂直)兩個，預設是horizontal的

reverse這個就是規定了children(子節點)的排序是否是倒序，預設false。這個引數在ListView也有，一般在做IM工具聊天內容用ListView展示時需要倒序展示的。

controller可以傳入一個PageController的範例進去，可以更好的控制PageView的各種動作，可以設定：

初始頁面(initialPage)、
是否儲存PageView狀態(keepPage)
每一個PageView子節點的內容佔改檢視的比例(viewportFraction)
直接調轉到指定的PageView的子節點的方法（jumpToPage
動畫(平滑移動)到指定的PageView的子節點的方法（animateToPage）
到下一個PageView的子節點的方法(nextPage)
到上一個PageView的子節點的方法(previousPage)
從以上可以看出基本是普通輪播圖元件的API

physics就是設定滑動效果：

NeverScrollablePhysics表示設定的不可捲動
BouncingScrollPhysics表示捲動到底了會有彈回的效果，就是iOS的預設互動
ClampingScrollPhysics表示捲動到底了就給一個效果，就是Android的預設互動
FixedExtentScrollPhysics就是ios經典選擇時間元件UIDatePicker那種互動。

pageSnapping就是設定是不是整頁捲動，預設是true.

dragStartBehavior這個屬性是設定認定開始拖動行為的方式，可以選擇的是down和start兩個，預設是start. down是第一個手指按下認定拖動開始，start是手指拖動才算開始。

allowImplicitScrolling這個屬性一般提供給視障人士使用的，預設是fasle

基本用法

PageView控制元件可以實現一個“圖片輪播”的效果，PageView不僅可以水平滑動也可以垂直滑動，簡單用法如下：

PageView(
      children: [
        Container(color: Colors.red,),
        Container(color: Colors.black,),
        Container(color: Colors.yellow,),
      ],
    );

PageView捲動方向預設是水平，可以設定其為垂直方向：

PageView(
    scrollDirection: Axis.vertical,
    ...
)

PageView配合PageController可以實現非常酷炫的效果，控制每一個Page不佔滿，

Container(
      height:200 ,
      child: PageView(
        scrollDirection: Axis.horizontal,
        controller: PageController(viewportFraction: 0.9),
        children: [
          Container(color: Colors.red,),
          Container(color: Colors.black,),
          Container(color: Colors.yellow,),
        ],
      ),
    );

PageController中屬性initialPage表示當前載入第幾頁,預設第一頁。

onPageChanged屬性是頁面發生變化時的回撥，用法如下：

無限捲動

PageView捲動到最後時希望捲動到第一個頁面，這樣看起來PageView是無限捲動的：

List<Widget> pageList = [PageView1(), PageView2(), PageView3()];
PageView.builder(
    itemCount: 10000,
    itemBuilder: (context, index) {
        return pageList[index % (pageList.length)];
    },
)

實現指示器

指示器顯示總數和當前位置，通過onPageChanged確定當前頁數並更新指示器。

 int _currentPageIndex = 0;
  List<Widget> pageList = [ Container(color: Colors.red,),
    Container(color: Colors.black,),
    Container(color: Colors.yellow,),];
 _buildPageView(){
    return Center(
      child: Container(
        height: 230,
        child: Stack(
          children: [
            PageView.builder(itemBuilder: (context,index){
              var val = pageList[index%(pageList.length)];
              print(val);
              return _buildPageViewItem('${val}');
            }),
            Positioned(
                bottom: 20,
                left: 0,
                right: 0,
                child: Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List.generate(pageList.length, (i){
                      return Container(
                        margin: EdgeInsets.symmetric(horizontal: 5),
                        width: 10,
                        height: 10,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: _currentPageIndex==i?Colors.blue:Colors.grey
                        ),
                      );
                    }).toList(),
                  ),
                )
            )
          ],
        ),
      ),
    );
  }
  _buildPageViewItem(String txt,{Color color=Colors.red}){
    return Container(
      color: color,
      alignment: Alignment.center,
      child: Text(txt,style: TextStyle(color: Colors.white,fontSize: 25),),
    );
  }

切換動畫

如此常見的切換效果顯然不能體驗我們獨特的個性，我們需要更炫酷的方式，看下面的效果：

在滑出的時候當前頁面逐漸縮小並居中，通過給PageController新增監聽獲取當前滑動的進度：

_pageController.addListener(() {
      setState(() {
        _currPageValue = _pageController.page;
      });
    });

全部程式碼：

/**
 * @Author wywinstonwy
 * @Date 2022/10/05 9:50 上午
 * @Description:
 */
import 'package:demo202112/utils/common_appbar.dart';
import 'package:flutter/material.dart';
class WyPageView1 extends StatefulWidget {
  const WyPageView1({Key? key}) : super(key: key);
  @override
  _WyPageViewState createState() => _WyPageViewState();
}
class _WyPageViewState extends State<WyPageView1> {
  int _currentPageIndex = 0;
  var imgList = [
    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2877516247,37083492&fm=26&gp=0.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582796218195&di=04ce93c4ac826e19067e71f916cec5d8&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F344fda8b47808261c946c81645bff489c008326f15140-koiNr3_fw658'
  ];
  late PageController _pageController;
  var _currPageValue=0;
  //縮放係數
  double _scaleFactor = .8;
  //view page height
  double _height = 230.0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _pageController=PageController(viewportFraction: 0.9);
    _pageController.addListener(() {
      setState(() {
        _currPageValue = _pageController.page;
      });
    });
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _pageController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getAppBar('PageView'),
      body: Container(
          height: _height,
          child: PageView.builder(
            itemBuilder: (context, index) => _buildPageItem(index),
            itemCount: 10,
            controller: _pageController,
          )),
    );
  }
  _buildPageItem(int index) {
    Matrix4 matrix4 = Matrix4.identity();
    if (index == _currPageValue.floor()) {
      //當前的item
      double currScale = (1 - (_currPageValue - index) * (1 - _scaleFactor)).toDouble();
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() + 1) {
      //右邊的item
      var currScale =
          _scaleFactor + (_currPageValue - index + 1) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() - 1) {
      //左邊
      var currScale = (1 - (_currPageValue - index) * (1 - _scaleFactor)).toDouble();
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else {
      //其他，不在螢幕顯示的item
      matrix4 = Matrix4.diagonal3Values(1.0, _scaleFactor, 1.0)
        ..setTranslationRaw(0.0, _height * (1 - _scaleFactor) / 2, 0.0);
    }
    return Transform(
      transform: matrix4,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            image: DecorationImage(
                image: NetworkImage(imgList[index % 2]), fit: BoxFit.fill),
          ),
        ),
      ),
    );
  }
}

gitdemo地址：gitee.com/wywinstonwy…

總結：

相比熟悉Android和IOS開發的同學都會比較熟悉ViewPager，可以在介面上滑動多個介面View的切換。在Flutter中同樣有這樣的組建那就是PageView,相比於ViewPager它有著更加強大的功能，畢竟Flutter中Widget是一等公民，在實際開發中也是比較實用的元件，可以提升開發效率。

以上就是Flutter開發Widgets 之 PageView使用範例的詳細內容，更多關於Flutter開發Widgets PageView的資料請關注it145.com其它相關文章！