PageView+BottomNavigationBar 實(shí)現(xiàn)底部 TAB 切換效果

如標(biāo)題所示,使用這倆widget 結(jié)合的話可以實(shí)現(xiàn) 安卓中的 BottomNavigationBar實(shí)現(xiàn)的 TAB 切換效果

先看下 PageView 的構(gòu)造方法:

??PageView.builder({

????Key key,

????this.scrollDirection = Axis.horizontal,

????this.reverse = false,

????PageController controller,

????this.physics,

????this.pageSnapping = true,

????this.onPageChanged,

????@required IndexedWidgetBuilder itemBuilder,

????int itemCount,

??})

scrollDirection:默認(rèn)滑動(dòng)方向是橫向的(Axis.horizontal),當(dāng)然你也可以設(shè)置為垂直方向的滑動(dòng),便于實(shí)現(xiàn)垂直滑動(dòng)效果

PageController:滑動(dòng)控制器

physics:控制物理滑動(dòng)?

對(duì)應(yīng)的子類有這些,NeverScrollableScrollPhysics()可以實(shí)現(xiàn)安卓中的 NoScrollViewPager 的效果(你懂得~)


onPageChanged:切換回調(diào)方法

itemCount:child widget 的數(shù)量

要實(shí)現(xiàn) tab 切換,我用集合存儲(chǔ)每一個(gè)頁面,并在initState()中進(jìn)行了初始化+添加(原諒我的命名1234-_-…).

List<Widget> pages = List<Widget>();

@override

void initState() {

??super.initState();

??pages.add(new HomeScreen());

??pages.add(new HomeScreen2());

??pages.add(new HomeScreen3());

??pages.add(new HomeScreen4());

}

接下來就是主頁面的 UI 繪制,導(dǎo)航欄用默認(rèn)的“腳手架”來搭建,內(nèi)嵌 AppBar 實(shí)現(xiàn)導(dǎo)航欄。


切換的方法:

void _pageChange(int index) {

??setState(() {

????if (_currentIndex != index) {

??????_currentIndex = index;

????}

??});

}

BottomNavigationBar 的點(diǎn)擊事件處理:

??????onTap: (int index) {

//??????????_pageController.animateToPage(index, duration: new Duration(seconds: 2),curve:new ElasticOutCurve(0.8));

??????????_pageChange(index);

????????}

搞定。

詳細(xì)代碼請(qǐng)參看:https://github.com/yanftch/flutter_demo/blob/develop/lib/wanandroid/HomePage.dart

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容