Flutter导航视图插件navigation_view的使用

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

Flutter导航视图插件navigation_view的使用

NavigationView (1.0.6)

NavigationView 是一个 Flutter 插件，提供了一个可自定义颜色和图标的导航组件。它允许你轻松创建带有页面切换动画的导航栏。

image_demo

安装

要在项目中使用 NavigationView 插件，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies: 
  navigation_view: ^1.0.6

然后运行 flutter pub get 来获取插件。

使用方法

  1. 导入包

    在 Dart 文件中导入 NavigationView 包：

    import 'package:navigation_view/navigation_view.dart';

  2. 创建 NavigationView 组件

    创建一个 NavigationView 组件，并提供必要的参数：

    NavigationView(
  onChangePage: (index) {
    // 页面切换时的回调函数
    print("Selected page: $index");
  },
  curve: Curves.easeInBack, // 动画曲线
  durationAnimation: const Duration(milliseconds: 400), // 动画持续时间
  items: [
    ItemNavigationView(
      childAfter: const Icon(Icons.home_rounded, color: Colors.blue, size: 30),
      childBefore: Icon(Icons.home_outlined, color: Colors.grey.withAlpha(60), size: 30),
    ),
    ItemNavigationView(
      childAfter: const Icon(Icons.widgets_rounded, color: Colors.blue, size: 30),
      childBefore: Icon(Icons.now_widgets_outlined, color: Colors.grey.withAlpha(60), size: 30),
    ),
    ItemNavigationView(
      childAfter: const Icon(Icons.wifi, color: Colors.blue, size: 30),
      childBefore: Icon(Icons.wifi_lock, color: Colors.grey.withAlpha(60), size: 30),
    ),
    ItemNavigationView(
      childAfter: const Icon(Icons.accessible, color: Colors.blue, size: 30),
      childBefore: Icon(Icons.not_accessible, color: Colors.grey.withAlpha(60), size: 30),
    ),
  ],
)
    • onChangePage：页面切换时的回调函数，接收当前选中的索引。
    • curve：设置动画的曲线效果。
    • durationAnimation：设置动画的持续时间。
    • items：导航项列表，每个项是一个 ItemNavigationView，包含两个子组件 childAfter 和 childBefore，分别表示选中和未选中状态下的显示内容。

完整示例

以下是一个完整的示例代码，展示了如何在应用中使用 NavigationView：

import 'package:flutter/material.dart';
import 'package:navigation_view/item_navigation_view.dart';
import 'package:navigation_view/navigation_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'PuzzleTak NavigationView'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Color> colors = [Colors.blue, Colors.red, Colors.amber, Colors.green];
  Color color = Colors.blue;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      backgroundColor: Colors.white.withAlpha(235),
      body: Padding(
        padding: const EdgeInsets.only(left: 10, right: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 第一个 NavigationView
            NavigationView(
              onChangePage: (index) {
                setState(() {
                  color = colors[index];
                });
              },
              durationAnimation: const Duration(milliseconds: 600),
              color: color,
              items: [
                ItemNavigationView(
                    childAfter: const Icon(Icons.home_rounded, color: Colors.blue, size: 30),
                    childBefore: Icon(Icons.home_outlined, color: Colors.grey.withAlpha(60), size: 30)),
                ItemNavigationView(
                    childAfter: const Icon(Icons.widgets_rounded, color: Colors.red, size: 30),
                    childBefore: Icon(Icons.now_widgets_outlined, color: Colors.grey.withAlpha(60), size: 30)),
                ItemNavigationView(
                    childAfter: const Icon(Icons.wifi, color: Colors.amber, size: 30),
                    childBefore: Icon(Icons.wifi_lock, color: Colors.grey.withAlpha(60), size: 30)),
                ItemNavigationView(
                    childAfter: const Icon(Icons.accessible, color: Colors.green, size: 30),
                    childBefore: Icon(Icons.not_accessible, color: Colors.grey.withAlpha(60), size: 30)),
              ],
            ),
            const SizedBox(height: 15),
            // 第二个 NavigationView
            NavigationView(
              onChangePage: (index) {},
              curve: Curves.easeInBack,
              durationAnimation: const Duration(milliseconds: 400),
              items: [
                ItemNavigationView(
                    childAfter: const Icon(Icons.home_rounded, color: Colors.blue, size: 30),
                    childBefore: Icon(Icons.home_outlined, color: Colors.grey.withAlpha(60), size: 30)),
                ItemNavigationView(
                    childAfter: const Icon(Icons.widgets_rounded, color: Colors.blue, size: 30),
                    childBefore: Icon(Icons.now_widgets_outlined, color: Colors.grey.withAlpha(60), size: 30)),
                ItemNavigationView(
                    childAfter: const Icon(Icons.wifi, color: Colors.blue, size: 30),
                    childBefore: Icon(Icons.wifi_lock, color: Colors.grey.withAlpha(60), size: 30)),
                ItemNavigationView(
                    childAfter: const Icon(Icons.accessible, color: Colors.blue, size: 30),
                    childBefore: Icon(Icons.not_accessible, color: Colors.grey.withAlpha(60), size: 30)),
              ],
            ),
            const SizedBox(height: 15),
            // 第三个 NavigationView
            NavigationView(
              onChangePage: (index) {},
              color: Colors.pink,
              curve: Curves.easeInQuint,
              durationAnimation: const Duration(milliseconds: 300),
              borderRadius: BorderRadius.circular(50),
              gradient: LinearGradient(
                  colors: [
                    Colors.white.withAlpha(0),
                    Colors.white.withOpacity(0.2)
                  ],
                  begin: const FractionalOffset(0.0, 0.0),
                  end: const FractionalOffset(0.0, 1.0),
                  stops: const [0.0, 1.0],
                  tileMode: TileMode.clamp),
              items: [
                ItemNavigationView(
                    childAfter: const Text("widget", style: TextStyle(color: Colors.pink)),
                    childBefore: Container(width: 60, height: 20, color: Colors.grey.withAlpha(50))),
                ItemNavigationView(
                    childAfter: const Icon(Icons.widgets_rounded, color: Colors.pink, size: 30),
                    childBefore: Icon(Icons.now_widgets_outlined, color: Colors.grey.withAlpha(60), size: 30)),
                ItemNavigationView(
                    childAfter: const Icon(Icons.wifi, color: Colors.blue, size: 30),
                    childBefore: const Text("widget", style: TextStyle(color: Colors.grey))),
              ],
            ),
            const SizedBox(height: 15),
            // 第四个 NavigationView
            NavigationView(
              onChangePage: (index) {},
              color: Colors.deepPurpleAccent,
              curve: Curves.easeInCubic,
              durationAnimation: const Duration(milliseconds: 350),
              items: [
                ItemNavigationView(
                    childAfter: const Icon(Icons.wifi, color: Colors.deepPurpleAccent, size: 25),
                    childBefore: Text("Wifi", style: TextStyle(color: Colors.grey.withAlpha(100)))),
                ItemNavigationView(
                    childAfter: const Icon(Icons.widgets_rounded, color: Colors.deepPurpleAccent, size: 25),
                    childBefore: Text("Apps", style: TextStyle(color: Colors.grey.withAlpha(100)))),
                ItemNavigationView(
                    childAfter: const Icon(Icons.alarm, color: Colors.deepPurpleAccent, size: 25),
                    childBefore: Text("Alarm", style: TextStyle(color: Colors.grey.withAlpha(100)))),
                ItemNavigationView(
                    childAfter: const Icon(Icons.account_box, color: Colors.deepPurpleAccent, size: 25),
                    childBefore: Text("Profile", style: TextStyle(color: Colors.grey.withAlpha(100)))),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


在Flutter中，虽然没有一个官方的名为navigation_view的插件专门用于导航视图，但我们可以使用Flutter提供的Drawer组件来实现一个常见的导航视图。Drawer通常与Scaffold一起使用，以提供一个从屏幕边缘滑出的导航菜单。

下面是一个使用Drawer组件实现导航视图的示例代码：

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Settings Page'),
    Text('Profile Page'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    if (index == 0) {
      // Open home page (do nothing since it's already open)
    } else if (index == 1) {
      // Navigate to settings page (example: could use Navigator.push)
      // Navigator.of(context).push(MaterialPageRoute(builder: (context) => SettingsPage()));
    } else if (index == 2) {
      // Navigate to profile page (example: could use Navigator.push)
      // Navigator.of(context).push(MaterialPageRoute(builder: (context) => ProfilePage()));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigation View Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              onTap: () {
                _onItemTapped(0);
                Navigator.pop(context); // Close the drawer
              },
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: () {
                _onItemTapped(1);
                Navigator.pop(context); // Close the drawer
              },
            ),
            ListTile(
              leading: Icon(Icons.person),
              title: Text('Profile'),
              onTap: () {
                _onItemTapped(2);
                Navigator.pop(context); // Close the drawer
              },
            ),
          ],
        ),
      ),
    );
  }
}

// Example pages that could be navigated to (not used in this example but shown for completeness)
class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: Center(
        child: Text('Settings Page'),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Center(
        child: Text('Profile Page'),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个MyApp类作为应用的入口。
  2. MyHomePage是一个包含导航抽屉的页面。抽屉中包含三个选项：Home、Settings和Profile。
  3. _onItemTapped方法用于处理抽屉中的选项点击事件，并更新当前显示的页面内容。虽然示例中没有实际导航到其他页面（只更改了显示的文本），但注释中提供了如何使用Navigator.push进行页面导航的示例。
  4. Drawer组件包含了一个ListView，用于列出所有的导航选项。

这个示例展示了如何使用Flutter内置的组件来实现一个类似于导航视图的功能。如果你需要更复杂的导航视图，可以考虑使用第三方库或者自定义实现。

回到顶部