套件詳情v1.3.2

scroll_navigation

這是一種透過手勢和點擊實現的強大導航。您可從左向右滑動或點擊導航圖示。

AndroidiOSmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 199
喜歡數: 120
Pub 分數: 140

安裝套件

flutter pub add scroll_navigation

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

ScrollNavigation 是一個 Flutter 套件，可透過水平捲動和點擊手勢實現直觀導航。專為基於標籤的介面設計，允許使用者透過左右滑動或點擊導航圖示在標籤之間切換。該套件透過跨多個平台的順暢過渡和即時反饋提升使用者體驗。適用於需要流暢、以手勢驅動導航的應用程式，支援 Android、iOS、macOS、Windows 和 Linux。其輕量級設計可無縫整合至現有的 Flutter 項目中。

適用情境

基於手勢的標籤頁導航
儀表板中的橫向滑動導航
行動和桌面應用程式導航
具有標籤式佈局的互動式 UI
取代傳統的底部導航欄

主要特色

橫向捲動導航
點擊導航圖示
跨平台支援
流暢的動畫
可自訂的導航指示器
響應式手勢檢測

適合對象

開發手勢豐富的 Flutter 應用的開發者
尋求現代導航模式的設計師
具有多個標籤頁區域的應用程式
同時針對行動裝置和桌面端的專案
希望輕量級導航解決方案的團隊

使用建議

可能需要自定樣式才能實現複雜設計
僅限水平導航
使用多個標籤頁時可能有性能影響
不適合垂直導航需求
在小螢幕上需要仔細處理觸控事件

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

scroll_navigation

My other APIs

Features

Fancy animations.
Customizable colors.
Works with the back button.
Scrolling pages by gestures.
Indicator that follows the scroll.
Easy and powerful implementation! :)
Page movement when tapping an icon.

Scroll Navigation Details

NavigationPosition.bottom	NavigationPosition.top

Code

@override
Widget build(BuildContext context) {
  return ScrollNavigation(
    bodyStyle: NavigationBodyStyle(
      background: Colors.white,
      borderRadius: BorderRadius.vertical(bottom: Radius.circular(20)),
    ),
    barStyle: NavigationBarStyle(
      background: Colors.white,
      elevation: 0.0,
    ),
    pages: [
      Container(color: Colors.blue[100]),
      Container(color: Colors.green[100]),
      Container(color: Colors.purple[100]),
      Container(color: Colors.amber[100]),
      Container(color: Colors.deepOrange[100])
    ],
    items: const [
      ScrollNavigationItem(icon: Icon(Icons.camera)),
      ScrollNavigationItem(icon: Icon(Icons.chat)),
      ScrollNavigationItem(icon: Icon(Icons.favorite)),
      ScrollNavigationItem(icon: Icon(Icons.notifications)),
      ScrollNavigationItem(icon: Icon(Icons.home))
    ],
  );
}

NavigationPosition.left	NavigationPosition.right

Code

@override
Widget build(BuildContext context) {
  return ScrollNavigation(
    bodyStyle: NavigationBodyStyle(
      background: Colors.white,
      borderRadius: BorderRadius.horizontal(left: Radius.circular(20)),
      scrollDirection: Axis.vertical,
    ),
    barStyle: NavigationBarStyle(
      position: NavigationPosition.left,
      elevation: 0.0,
      background: Colors.white,
    ),
    pages: [
      Container(color: Colors.blue[100]),
      Container(color: Colors.green[100]),
      Container(color: Colors.purple[100]),
      Container(color: Colors.amber[100]),
      Container(color: Colors.deepOrange[100])
    ],
    items: const [
      ScrollNavigationItem(icon: Icon(Icons.camera)),
      ScrollNavigationItem(icon: Icon(Icons.chat)),
      ScrollNavigationItem(icon: Icon(Icons.favorite)),
      ScrollNavigationItem(icon: Icon(Icons.notifications)),
      ScrollNavigationItem(icon: Icon(Icons.home))
    ],
  );
}

Go to a Page Code

final navigationKey = GlobalKey<ScrollNavigationState>();

@override
Widget build(BuildContext context) {
  return ScrollNavigation(
    key: navigationKey,
    pages: [...],
    items: [...],
    barStyle: NavigationBarStyle(position: NavigationPosition.top),
  );
}

void goToPage(int index) => navigationKey.currentState.goToPage(index);

Identifier Details

physics = true	physics = False

position = IdentifierPosition.topAndRight	showIdentifier = False

Code

return ScrollNavigation(
    pages: [...],
    items: [...],
    physics: true,
    showIdentifier: true,
    identiferStyle: NavigationIdentiferStyle(
      position: NavigationPosition.top,
    ),
);

Title Scroll Navigation Details

Code

return TitleScrollNavigation(
    barStyle: TitleNavigationBarStyle(
      style: TextStyle(fontWeight: FontWeight.bold),
      padding: EdgeInsets.symmetric(horizontal: 40.0),
      spaceBetween: 40,
    ),
    titles: [
      "Main Page",
      "Personal Information",
      "Personalization",
      "Security",
      "Payment Methods",
    ],
    pages: [
      Container(color: Colors.blue[50]),
      Container(color: Colors.red[50]),
      Container(color: Colors.green[50]),
      Container(color: Colors.purple[50]),
      Container(color: Colors.yellow[50]),
    ],
);

Screen Details (Hide AppBar on scroll)

Code

ScrollController controller = ScrollController();

return Screen(
    appBar: AppBarTitle(title: "Title Scroll", showBack: true), //WIDGET IN THE EXAMPLE
    controllerToHideAppBar: controller,
    body: ListView.builder(
      itemCount: 15,
      padding: EdgeInsets.zero,
      controller: controller,
      itemBuilder: (_, __) {
        return Padding(
          padding: EdgeInsets.symmetric(vertical: 5),
          child: Container(
            height: 50,
            color: Colors.blue[50],
          ),
        );
      },
    ),
  );

所屬分類

標籤頁

依賴

依賴清單 1 項

helpers^1.1.3

原始碼儲存庫

seel-channel/scroll_navigation

scroll_navigation

☆ 16 星標⑂ 13 分支

DartSwiftflutternavigationflutter-package

使用此套件的專案

暫無相關資料。