Flutter导航栏插件navigation_rail_view的使用

Flutter导航栏插件navigation_rail_view的使用

安装

  1. 如果juneflow项目不存在，请按照此指南创建。
  2. 在juneflow项目的根目录下打开终端，输入以下命令：
    june add navigation_rail_view
  3. 通过输入以下命令启动项目：
    flutter run lib/app/_/_/interaction/view.blueprint/page/navigation_rail_view/_/view.dart -d chrome

使用示例

导航栏的基本用法

首先，确保你已经安装了navigation_rail_view插件。接下来，我们将展示如何在你的Flutter应用中使用它。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NavigationRailViewPage(),
    );
  }
}

class NavigationRailViewPage extends StatefulWidget {
  [@override](/user/override)
  _NavigationRailViewPageState createState() => _NavigationRailViewPageState();
}

class _NavigationRailViewPageState extends State<NavigationRailViewPage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('navigation_rail_view 示例'),
      ),
      body: Center(
        child: Text('当前选中: ${_selectedIndex + 1}'),
      ),
      bottomNavigationBar: NavigationRail(
        destinations: const [
          NavigationRailDestination(
            icon: Icon(Icons.home),
            label: Text('首页'),
          ),
          NavigationRailDestination(
            icon: Icon(Icons.favorite),
            label: Text('收藏'),
          ),
          NavigationRailDestination(
            icon: Icon(Icons.settings),
            label: Text('设置'),
          ),
        ],
        selectedIndex: _selectedIndex,
        onDestinationSelected: (int index) {
          _onItemTapped(index);
        },
      ),
    );
  }
}

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

1 回复

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


navigation_rail_view 是一个用于 Flutter 的第三方插件，它提供了一个简单而强大的导航栏组件，通常用于桌面或平板设备上的导航。NavigationRail 是 Flutter 内置的一个组件，但 navigation_rail_view 插件提供了更多的定制化和功能。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  navigation_rail_view: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本用法

以下是一个简单的示例，展示如何使用 navigation_rail_view 插件来创建一个基本的导航栏：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NavigationRailExample(),
    );
  }
}

class NavigationRailExample extends StatefulWidget {
  @override
  _NavigationRailExampleState createState() => _NavigationRailExampleState();
}

class _NavigationRailExampleState extends State<NavigationRailExample> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          NavigationRailView(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            destinations: [
              NavigationRailDestination(
                icon: Icon(Icons.home),
                label: Text('Home'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.business),
                label: Text('Business'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.school),
                label: Text('School'),
              ),
            ],
          ),
          Expanded(
            child: Center(
              child: Text('Selected Index: $_selectedIndex'),
            ),
          ),
        ],
      ),
    );
  }
}

参数说明

  • selectedIndex: 当前选中的导航项索引。
  • onDestinationSelected: 当用户选择一个导航项时触发的回调函数。
  • destinations: 导航项的列表，每个导航项是一个 NavigationRailDestination 对象，包含 icon 和 label。

自定义样式

navigation_rail_view 提供了许多自定义选项，例如：

  • backgroundColor: 设置导航栏的背景颜色。
  • elevation: 设置导航栏的阴影高度。
  • leading: 在导航栏顶部添加一个前置组件。
  • trailing: 在导航栏底部添加一个后置组件。
  • groupAlignment: 设置导航项的对齐方式。

示例：自定义样式

NavigationRailView(
  selectedIndex: _selectedIndex,
  onDestinationSelected: (int index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  destinations: [
    NavigationRailDestination(
      icon: Icon(Icons.home),
      label: Text('Home'),
    ),
    NavigationRailDestination(
      icon: Icon(Icons.business),
      label: Text('Business'),
    ),
    NavigationRailDestination(
      icon: Icon(Icons.school),
      label: Text('School'),
    ),
  ],
  backgroundColor: Colors.blueGrey,
  elevation: 8.0,
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {
      // 处理菜单按钮点击事件
    },
  ),
  trailing: IconButton(
    icon: Icon(Icons.settings),
    onPressed: () {
      // 处理设置按钮点击事件
    },
  ),
  groupAlignment: -1.0, // 顶部对齐
);
回到顶部