日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter?Widget之NavigationBar使用詳解_Android

作者：程序員界的小學生 ? 更新時間： 2023-01-05 編程語言

正文

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

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

現在，您可能會想，“底部們有導航欄嗎？，這個新的導航欄小部件有什么特別之處？“

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

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

要啟動并運行，為NavigationBar提供destination列表，當前所選的索引以及每當選擇destination時出發的回調而已。

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;
        });
    }
)

現在您的應用程序可以使用選定的索引來決定要承鉉哪個視圖。

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之類的東西，以便當destination在選中和未選中之間更改狀態時。

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

準備好在大屏幕訪問您的應用程序了嗎？將NavigationBar與NaviigationRail欄配對，您將立即擁有一個完全相應的導航系統。

如果想了解有關NavigationBar的內容，或者關于Flutter的其他功能，請訪問?flutter.dev

原文鏈接：https://juejin.cn/post/7174262771289161741

欄目分類
最近更新