怎么實(shí)現(xiàn)PageView滑動(dòng)視圖Flutter

本篇內(nèi)容主要講解“怎么實(shí)現(xiàn)PageView滑動(dòng)視圖Flutter”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么實(shí)現(xiàn)PageView滑動(dòng)視圖Flutter”吧!

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(
  home: MyApp(),
));
//創(chuàng)建一個(gè)PageController，方便使用底部導(dǎo)航欄改變PageView的內(nèi)容
PageController _pageController = new PageController();
int _curIndex = 0;//當(dāng)前索引
//純色頁面，用Page類構(gòu)造函數(shù)批量生成
var pages = <Widget>[
  Page(Colors.orange),
  Page(Colors.purple),
  Page(Colors.green)
];
class Page extends StatelessWidget {
  Color c;
  Page(this.c);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(color: c,),
    );
  }
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("滑動(dòng)"),
      ),
      //PageView滑動(dòng)界面 [https://www.jianshu.com/p/036c3b865820]
      body: PageView.builder(
        controller: _pageController,
        itemBuilder: (context,index) => pages[index],
        itemCount: pages.length,
        //當(dāng)滑動(dòng)的時(shí)候改變當(dāng)前索引,并刷新界面
        onPageChanged: (index){
          setState(() {
            _curIndex = index;
          });
        },
      ),
      //創(chuàng)建底部導(dǎo)航欄
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            title: Text("Orange"),
            icon:Icon(Icons.star)
          ),
          BottomNavigationBarItem(
            title: Text("Purple"),
            icon:Icon(Icons.star)
          ),
          BottomNavigationBarItem(
              title: Text("Green"),
              icon:Icon(Icons.star)
          )
        ],
        currentIndex: _curIndex,
          //在導(dǎo)航欄中利用Controller改變PageView
        onTap: (index){
          _pageController.jumpToPage(index);
        }
      ),
    );
  }
}

到此，相信大家對(duì)“怎么實(shí)現(xiàn)PageView滑動(dòng)視圖Flutter”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！