PageView滑動視圖|PageController調整頁面的顯示
-
效果
-
源代碼
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 = <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("滑動"),
),
//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);
}
),
);
}
}