Flutter學習-Pageview

Pageview提供了頁面滑動，可提供滑動展示，圖示展示等功能

屬性說明:

PageView({
  Key? key,
  this.scrollDirection = Axis.horizontal, //滑動方向
  this.reverse = false, //是否反轉滑動
  PageController? controller, //page控制器
  this.physics, //拉動至邊緣時特效顯示的模式
  this.pageSnapping = true, //是否要一次滑動到底
  this.onPageChanged, //page改變的回調
  List<Widget> children = const <Widget>[], //要放的page，為列表
  this.dragStartBehavior = DragStartBehavior.start,
  this.allowImplicitScrolling = false, //允許前後頁緩存
  this.restorationId, //在某種情況下，保持滑動的偏移量
  this.clipBehavior = Clip.hardEdge,  //滑裁的方式
  this.scrollBehavior,
  this.padEnds = true,
}) : assert(allowImplicitScrolling != null),
     assert(clipBehavior != null),
     controller = controller ?? _defaultPageController,
     childrenDelegate = SliverChildListDelegate(children),
     super(key: key);

二、基本的使用方法如下:

PageView(
  children: [
    Container(
      color: Colors.red,
      child: Center(child: Text('第一頁', style: TextStyle(color: Colors.black),),),
    ),
    Container(
      color: Colors.blue,
      child: Center(child: Text('第二頁', style: TextStyle(color: Colors.black),),),
    ),
    Container(
      color: Colors.yellow,
      child: Center(child: Text('第三頁', style: TextStyle(color: Colors.black),),),
    ),
  ],
),

三、PageController使用方法如下:

PageController({
  this.initialPage = 0,  //初始頁面
  this.keepPage = true,  //scrable的頁面
  this.viewportFraction = 1.0, //
}) : assert(initialPage != null),
     assert(keepPage != null),
     assert(viewportFraction != null),
     assert(viewportFraction > 0.0);

配合PageController使用的範例:

class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin{
  PageController page=PageController();
  @override
  void dispose() {
    page.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    super.build(context);

    return Scaffold(
      body:Column(
        children: [
          Expanded(child: PageView(
            controller:page,
            allowImplicitScrolling: true,
            children: [
              Container(
                color: Colors.red,
                child: Center(child: Text('第一頁', style: TextStyle(color: Colors.black),),),
              ),
              Container(
                color: Colors.blue,
                child: Center(child: Text('第二頁', style: TextStyle(color: Colors.black),),),
              ),
              Container(
                color: Colors.yellow,
                child: Center(child: Text('第三頁', style: TextStyle(color: Colors.black),),),
              ),
            ],
          ),),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              ElevatedButton(onPressed: (){
                if (page.hasClients) {
                  page.animateToPage(
                    0,
                    duration: const Duration(milliseconds: 400),
                    curve: Curves.easeInOut,
                  );
                }
              }, child: Text('點我跳到第一頁'),),
              ElevatedButton(onPressed: (){
                if (page.hasClients) {
                  page.animateToPage(
                    1,
                    duration: const Duration(milliseconds: 400),
                    curve: Curves.easeInOut,
                  );
                }
              }, child: Text('點我跳到第二頁'),),
              ElevatedButton(onPressed: (){
                if (page.hasClients) {
                  page.animateToPage(
                    2,
                    duration: const Duration(milliseconds: 400),
                    curve: Curves.easeInOut,
                  );
                }
              }, child: Text('點我跳到第三頁'),),
            ],
          ),
        ],

      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  //此為AutomaticKeepAliveClientMixin的方法，在此重寫裡面的wantKeepAlive，使頁面可緩存，不用每次重複讀取
  @override
  bool get wantKeepAlive => true;

}