通过手势和点击进行 Flutter 导航

滚动导航

FLUTTER API：通过手势和点击实现强大的导航。您可以从左到右滚动，或点击导航图标。

特点

• 通过手势滚动页面。
• 点击图标时页面移动。
• 跟随滚动的指示器。
• 与后退按钮配合使用。
• 精美的动画。
• 可自定义颜色。
• 实现简单且强大！ :)

实施

return ScrollNavigation(
  pages: <Widget>[
    Screen(title: title("Camera")),
    Screen(title: title("Messages"), backgroundColor: Colors.yellow[50]),
    Screen(title: title("Favor"), body: Container(color: Colors.cyan[50])),
    Screen(title: title("Activity"), backgroundColor: Colors.yellow[50]),
    Screen(title: title("Home"))
  ],
  navItems: <ScrollNavigationItem>[
    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),
      activeIcon: Icon(Icon: verified_user),
    ),
  ],
  pagesActionButtons: <Widget>[
    FloatingActionButton( //PAGE 1
      child: Icon(Icons.receipt),onPressed: () => null
    ),
    null,
    FloatingActionButton( //PAGE 3
      child: Icon(Icons.sync), onPressed: () => null,
    ),
    null,
    FloatingActionButton( //PAGE 5
      child: Icon(Icons.add), onPressed: () => print("Cool :)"),
    ),
  ],
);

滚动导航详情

(建议在 Screen Widget 中设置 showAppBar = false)

navigationOnTop = True	navigationOnTop = False

跳转到页面代码

final navigationKey = GlobalKey<ScrollNavigationState>();

@override
Widget build(BuildContext context) {
  return ScrollNavigation(
    key: navigationKey,
    navigationOnTop = true, //Default is false
    pages: <Widget>[],
    navItems: <ScrollNavigationItem>[],
  );
}

void goToPage(int index) {
  navigationKey.currentState.goToPage(index);
}

标识符详情

identifierPhysics = True	identifierPhysics = False

identifierOnBottom = False	showIdentifier = False

代码

return ScrollNavigation(
    showIdentifier = true,
    identifierPhysics = true,
    identifierOnBottom = true,
    pages: <Widget>[],
    navItems: <ScrollNavigationItem>[],
);

屏幕详情

Screen 修复了 Scaffold 在 ScrollNavigation 中遇到的一些问题。

无小部件	带小部件

无小部件代码

return Screen();

带小部件代码

return Screen(
    title: title("Home"), //Function in the Example
    leftWidget: Icon(Icons.menu, color: Colors.grey),
    rightWidget: Icon(Icons.favorite, color: Colors.grey),
);

滚动时隐藏 AppBar。

代码

ScrollController controller = ScrollController();

return Screen(
    height: 56.0,
    elevation: 0.0,
    centerTitle: false,
    title: title("Title Scroll"),
    leftWidget: ScreenReturnButton(), //IMPORTANT TO RETURN!
    controllerToHideAppBar: controller,
    body: ListView.builder(
      itemCount: 15,
      controller: controller,
      itemBuilder: (context, key) {
        return Padding(
          padding: EdgeInsets.symmetric(vertical: 5),
          child: Container(
            height: 50,
            color: Colors.blue[50],
          ),
        );
      },
    ),
  );

标题滚动导航详情

代码

return TitleScrollNavigation(
    padding: TitleScrollPadding.symmetric(horizontal: 40.0, betweenTitles: 40),
    titleStyle: TextStyle(fontWeight: FontWeight.bold),
    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]),
    ],
);

GitHub

https://github.com/seel-channel/scroll_navigation