Flutter导航栏插件curved_navigation_rail的使用

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

Flutter导航栏插件curved_navigation_rail的使用

curved_navigation_rail 是一个用于轻松实现弯曲导航栏的 Flutter 包。它旨在成为 NavigationRail 的直接替代品。

示例展示

以下是该插件的一些示例展示：

Gif

Gif

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  curved_navigation_rail: ^2.0.1 #最新版本

简单易用

查看 examples 文件夹中的 minimal_example.dart 文件以获取最小示例。

属性

以下是 curved_navigation_rail 的一些属性：

  • destinations: 导航栏的目的地列表，类型为 List<NavigationRailDestination>
  • selectedIndex: 当前选中的导航项索引，默认值为 0
  • color: 导航栏的颜色，默认值为白色
  • buttonBackgroundColor: 浮动按钮的背景颜色，默认与 color 属性相同
  • backgroundColor: 导航栏背景颜色，默认为上下文主题的 scaffoldBackgroundColor
  • onDestinationSelected: 处理点击事件的函数，接受一个整数参数表示当前选中的索引
  • animationCurve: 控制按钮变化动画的曲线，默认为 Curves.easeOutCubic
  • animationDuration: 动画持续时间，默认为 600 毫秒
  • width: 导航栏的宽度，默认为 50.0
  • letIndexChange: 一个函数，接受页面索引作为参数并返回布尔值。如果返回 false，则不会改变页面。默认返回 true

示例代码

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

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CurvedNavigationRailExamplePage(),
    );
  }
}

class CurvedNavigationRailExamplePage extends StatefulWidget {
  const CurvedNavigationRailExamplePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<CurvedNavigationRailExamplePage> createState() => 
      _CurvedNavigationRailExamplePageState();
}

class _CurvedNavigationRailExamplePageState 
    extends State<CurvedNavigationRailExamplePage> {
  int _selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final List<NavigationRailDestination> destinations = const [
      NavigationRailDestination(
          icon: Icon(Icons.person), label: Text('Profile')),
      NavigationRailDestination(icon: Icon(Icons.home), label: Text('Home')),
      NavigationRailDestination(
          icon: Icon(Icons.settings), label: Text('Settings')),
    ];

    return Scaffold(
      body: Row(
        children: [
          // 使用 CurvedNavigationRail 替换 NavigationRail
          CurvedNavigationRail(
            destinations: destinations,
            onDestinationSelected: (index) => 
                setState(() => _selectedIndex = index),
            selectedIndex: _selectedIndex,
          ),
          MyContent(value: _selectedIndex),
        ],
      ),
    );
  }
}

class MyContent extends StatelessWidget {
  const MyContent({Key? key, required this.value}) : super(key: key);

  final int value;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Expanded(child: Center(child: Text('This is Page $value')));
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何使用Flutter中的curved_navigation_rail插件来创建带有曲线导航栏的示例代码。这个插件允许你创建一个具有曲线形状导航栏的应用界面，非常适合需要动态导航的应用。

首先，确保你已经在pubspec.yaml文件中添加了curved_navigation_rail依赖：

dependencies:
  flutter:
    sdk: flutter
  curved_navigation_rail: ^x.y.z  # 请替换为最新版本号

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

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Curved Navigation Rail Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CurvedNavigationRailDemo(),
    );
  }
}

class CurvedNavigationRailDemo extends StatefulWidget {
  @override
  _CurvedNavigationRailDemoState createState() => _CurvedNavigationRailDemoState();
}

class _CurvedNavigationRailDemoState extends State<CurvedNavigationRailDemo> {
  int selectedIndex = 0;

  final List<String> items = List<String>.generate(5, (i) => "Item ${i + 1}");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Curved Navigation Rail Example'),
      ),
      body: CurvedNavigationRailScaffold(
        header: AppBar(
          title: Text('Curved Navigation Rail'),
          backgroundColor: Colors.blue,
        ),
        rail: CurvedNavigationRail(
          selectedIndex: selectedIndex,
          onSelectedIndexChanged: (index) {
            setState(() {
              selectedIndex = index;
            });
          },
          leading: Icon(Icons.menu),
          trailing: Icon(Icons.more_horiz),
          backgroundColor: Colors.grey[200]!,
          items: items.map((e) {
            return CurvedNavigationRailItem(
              icon: Icon(Icons.circle),
              title: Text(e),
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
            );
          }).toList(),
        ),
        content: Center(
          child: Text(
            items[selectedIndex],
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

代码说明：

  1. 依赖导入：

    import 'package:curved_navigation_rail/curved_navigation_rail.dart';

  2. MyApp 类：

    • 这是应用的主入口，配置了应用的主题和主页。

  3. CurvedNavigationRailDemo 类：

    • 这是一个有状态的Widget，用于管理导航栏的选中状态。
    • selectedIndex 变量存储当前选中的索引。
    • items 列表包含导航项的文本。

  4. CurvedNavigationRailScaffold：

    • 这是curved_navigation_rail插件提供的Scaffold，用于包含导航栏和内容。
    • header 是一个AppBar，作为导航栏的顶部标题栏。
    • rail 是实际的曲线导航栏，配置了选中项、选中改变回调、导航项等。
    • content 是根据选中索引显示的内容。

  5. CurvedNavigationRailItem：

    • 每个导航项的配置，包括图标、标题、选中颜色和非选中颜色。

运行代码：

将上述代码复制到你的Flutter项目中，并运行flutter run来查看效果。你应该会看到一个带有曲线导航栏的应用，点击不同的导航项会显示相应的内容。

这个示例展示了基本的curved_navigation_rail使用方法，你可以根据需要进一步自定义和扩展。

回到顶部