Flutter?Widget之NavigationBar使用詳解

更新時間：2022年12月07日 16:42:50 作者：程序員界的小學(xué)生

這篇文章主要為大家介紹了Flutter?Widget之NavigationBar使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

這是一個和時間一樣古老的故事。您的應(yīng)用程序有三到五個主要內(nèi)容區(qū)域，您的用戶應(yīng)該能夠在任何屏幕之間切換。

那么，在這種情況下，請查看NavigationBar。

現(xiàn)在，您可能會想，“底部們有導(dǎo)航欄嗎？，這個新的導(dǎo)航欄小部件有什么特別之處？“

不同之處在于BoottomNavigationBar使用Material 2設(shè)計系統(tǒng)，而NavigationBar具有新的Material 3外觀和感覺。

例如，藥丸形狀，它以對比色指示活動的目的地。

要啟動并運行，為NavigationBar提供destination列表，當(dāng)前所選的索引以及每當(dāng)選擇destination時出發(fā)的回調(diào)而已。

NavigationBar(
    destinations: [
        NavigationDestination(
            icon: Icon(Icons.home),
            label: 'Home',
        ),
        NavigationDestination(
            icon: Icon(Icons.explore),
            label: 'Explore',
        ),
        NavigationDestination(
            icon: Icon(Icons.person),
            label: 'Profile',
        ),
        NavigationDesstination(
            icon: Icon(Icons.settings_rounded,
            label: 'Settings',
        ),
    ],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) {
        setState(() {
            currentPageIndex = index;
        });
    }
)

現(xiàn)在您的應(yīng)用程序可以使用選定的索引來決定要承鉉哪個視圖。

Scaffold(
    bottomNavigationBar: NavigationBar(...),
    body: [Widget1, Widget2, Widget3, Widget4][currentPageIndex]
)

您可以使用它并配置諸如labelBehavior

NavigationBar(
    destinations: [...].
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) {...},
    labelBehavior: onlyShowSelected,
)

background

NavigationBar(
    destinations: [...],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) {...},
    backgroundColor: Colors.grey,
)

和animationDuration之類的東西，以便當(dāng)destination在選中和未選中之間更改狀態(tài)時。

NavigationBar(
    destinations: [...],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) {...},
    animationDuration: Duration(ms: 1000),
)