Flutter滚动导航插件scroll_navigation的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter滚动导航插件 scroll_navigation 的使用

scroll_navigation 是一个功能强大的Flutter插件，提供了多种导航方式和自定义选项。它支持顶部、底部、左侧和右侧的导航栏，并且可以与页面滚动进行联动。

主要特性

  • 华丽的动画效果。
  • 可定制的颜色。
  • 支持返回按钮。
  • 通过手势滑动页面。
  • 指示器跟随滚动。
  • 简单而强大的实现！
  • 点击图标时页面切换。

示例代码

基础水平导航（底部）

import 'package:flutter/material.dart';
import 'package:scroll_navigation/navigation/scroll_navigation.dart';

class EasyHorizontalNavigation extends StatelessWidget {
  const EasyHorizontalNavigation({Key key}) : super(key: key);

  @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))
      ],
    );
  }
}

基础垂直导航（左侧）

import 'package:flutter/material.dart';
import 'package:scroll_navigation/navigation/scroll_navigation.dart';

class EasyVerticalNavigation extends StatelessWidget {
  const EasyVerticalNavigation({Key key}) : super(key: key);

  @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))
      ],
    );
  }
}

高级导航示例

import 'package:flutter/material.dart';
import 'package:scroll_navigation/navigation/scroll_navigation.dart';

class AdvancedNavigation extends StatefulWidget {
  @override
  _AdvancedNavigationState createState() => _AdvancedNavigationState();
}

class _AdvancedNavigationState extends State<AdvancedNavigation> {
  final navigationKey = GlobalKey<ScrollNavigationState>();

  @override
  Widget build(BuildContext context) {
    return ScrollNavigation(
      key: navigationKey,
      pages: [
        Screen(appBar: AppBarTitle(title: "Camera")),
        Screen(appBar: AppBarTitle(title: "Messages")),
        Screen(appBar: AppBarTitle(title: "Favor"), body: Container(color: Colors.cyan[50])),
        Screen(appBar: AppBarTitle(title: "Activity")),
        Screen(appBar: AppBarTitle(title: "Home"))
      ],
      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), activeIcon: Icon(Icons.verified_user))
      ],
      pagesActionButtons: [
        FloatingActionButton(child: Icon(Icons.receipt), backgroundColor: Colors.red, onPressed: () {}),
        null,
        FloatingActionButton(onPressed: () => navigationKey.currentState.goToPage(4), child: Icon(Icons.arrow_right)),
        null,
        FloatingActionButton(onPressed: () => navigationKey.currentState.goToPage(2), child: Icon(Icons.arrow_left)),
      ],
    );
  }
}

标题滚动导航示例

import 'package:flutter/material.dart';
import 'package:scroll_navigation/navigation/title_scroll_navigation.dart';

class TitleScrollScreen extends StatefulWidget {
  TitleScrollScreen({Key key}) : super(key: key);

  @override
  _TitleScrollScreenState createState() => _TitleScrollScreenState();
}

class _TitleScrollScreenState extends State<TitleScrollScreen> {
  final ScrollController controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
        child: Screen(
          appBar: AppBarTitle(title: "Title Scroll", showBack: true),
          controllerToHideAppBar: controller,
          body: TitleScrollNavigation(
            barStyle: TitleNavigationBarStyle(
              style: TextStyle(fontWeight: FontWeight.bold),
              padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 20.0),
              spaceBetween: 40,
            ),
            titles: ["Main Page", "Personal Information", "Personalization", "Security", "Payment Methods"],
            pages: [
              ListView.builder(
                itemCount: 30,
                controller: controller,
                padding: EdgeInsets.zero,
                itemBuilder: (_, __) {
                  return Padding(
                    padding: EdgeInsets.only(bottom: 10),
                    child: Container(height: 60, color: Colors.blue[50]),
                  );
                },
              ),
              Container(color: Colors.red[50]),
              Container(color: Colors.green[50]),
              Container(color: Colors.purple[50]),
              Container(color: Colors.yellow[50]),
            ],
          ),
        ),
      ),
    );
  }
}

自定义App Bar隐藏示例

import 'package:flutter/material.dart';
import 'package:scroll_navigation/navigation/screen.dart';

class HideAppBarOnScroll extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ScrollController controller = ScrollController();

    return Screen(
      appBar: AppBarTitle(title: "Title Scroll", showBack: true),
      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]),
          );
        },
      ),
    );
  }
}

以上是 scroll_navigation 插件的基本使用方法和一些高级示例。你可以根据自己的需求进行定制和扩展。希望这些示例对你有所帮助！


更多关于Flutter滚动导航插件scroll_navigation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter滚动导航插件scroll_navigation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用scroll_navigation插件来实现滚动导航的示例代码。scroll_navigation插件允许你创建一个带有导航条的滚动视图，当用户滚动页面时，导航条会相应地更新以指示当前的位置。

首先，你需要在你的pubspec.yaml文件中添加scroll_navigation依赖：

dependencies:
  flutter:
    sdk: flutter
  scroll_navigation: ^x.y.z  # 请使用最新版本号替换 x.y.z

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示了如何使用scroll_navigation插件：

import 'package:flutter/material.dart';
import 'package:scroll_navigation/scroll_navigation.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Scroll Navigation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ScrollNavigationExample(),
    );
  }
}

class ScrollNavigationExample extends StatefulWidget {
  @override
  _ScrollNavigationExampleState createState() => _ScrollNavigationExampleState();
}

class _ScrollNavigationExampleState extends State<ScrollNavigationExample> {
  final List<String> sections = [
    'Section 1',
    'Section 2',
    'Section 3',
    'Section 4',
    'Section 5',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll Navigation Example'),
      ),
      body: ScrollNavigation(
        sections: sections,
        builder: (context, index) {
          return Padding(
            padding: const EdgeInsets.symmetric(vertical: 20.0),
            child: Center(
              child: Text(
                sections[index],
                style: TextStyle(fontSize: 24),
              ),
            ),
          );
        },
        onIndexChanged: (index) {
          print('Scrolled to section: ${sections[index]}');
        },
        headerBuilder: (context, index) {
          return Container(
            height: 50,
            color: Colors.grey[300],
            alignment: Alignment.center,
            child: Text(
              sections[index],
              style: TextStyle(color: Colors.black, fontSize: 18),
            ),
          );
        },
      ),
    );
  }
}

解释

  1. 依赖添加：

    • 在pubspec.yaml中添加scroll_navigation依赖。

  2. 主应用：

    • MyApp是一个简单的MaterialApp，设置了主题并将ScrollNavigationExample作为首页。

  3. 滚动导航示例：

    • ScrollNavigationExample是一个StatefulWidget，它维护了一个包含不同部分名称的列表。
    • ScrollNavigation组件接收几个参数：
      • sections：一个字符串列表，表示导航的各个部分。
      • builder：一个函数，它根据索引返回每个部分的UI。
      • onIndexChanged：一个可选的回调函数，当滚动到新的部分时调用。
      • headerBuilder：一个函数，它根据索引返回每个部分的头部UI（通常用于导航栏）。

运行示例

将上述代码粘贴到你的Flutter项目中，并确保你已经在pubspec.yaml中添加了scroll_navigation依赖。然后运行应用，你应该能看到一个带有滚动导航的页面，当用户滚动页面时，导航条会相应地更新。

希望这个示例能帮你理解如何在Flutter中使用scroll_navigation插件！

回到顶部