怎么实现PageView滑动视图Flutter

本篇内容主要讲解"怎么实现PageView滑动视图Flutter"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"怎么实现PageView滑动视图Flutter"吧!

import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';void main()=>runApp(MaterialApp(  home: MyApp(),));//创建一个PageController，方便使用底部导航栏改变PageView的内容PageController _pageController = new PageController();int _curIndex = 0;//当前索引//纯色页面，用Page类构造函数批量生成var pages = [  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 {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("滑动"),      ),      //PageView滑动界面 [https://www.jianshu.com/p/036c3b865820]      body: PageView.builder(        controller: _pageController,        itemBuilder: (context,index) => pages[index],        itemCount: pages.length,        //当滑动的时候改变当前索引,并刷新界面        onPageChanged: (index){          setState(() {            _curIndex = index;          });        },      ),      //创建底部导航栏      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,          //在导航栏中利用Controller改变PageView        onTap: (index){          _pageController.jumpToPage(index);        }      ),    );  }}

到此，相信大家对"怎么实现PageView滑动视图Flutter"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！