Flutter可滚动重排序导航栏插件scrollable_reorderable_navbar的使用

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

Flutter可滚动重排序导航栏插件 scrollable_reorderable_navbar 的使用

ScrollableReordableNavbar 是一个用于 Flutter 的插件,可以创建底部导航栏。当导航项超过5个时,导航栏可以滚动显示,并且允许用户通过滑动重新排列导航项,还可以删除导航项。

安装

在您的 pubspec.yaml 文件中添加依赖:

dependencies:
  scrollable_reorderable_navbar: ^0.0.1

导入包:

import 'package:scrollable_reorderable_navbar/scrollable_reorderable_navbar.dart';

基本用法

以下是一个基本的示例代码:

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Permissions demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const BottomNavBarPage(),
    );
  }
}

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

  [@override](/user/override)
  _BottomNavBarPageState createState() => _BottomNavBarPageState();
}

class _BottomNavBarPageState extends State<BottomNavBarPage> {
  int _selectedIndex = 0;
  List<NavBarItem> _items = const [
    NavBarItem(widget: Icon(Icons.home), name: "Home"),
    NavBarItem(widget: Icon(Icons.group), name: "Social"),
    NavBarItem(widget: Icon(Icons.call), name: "Calls"),
    NavBarItem(widget: Icon(Icons.image), name: "Pictures"),
    NavBarItem(widget: Icon(Icons.message), name: "Messages"),
    NavBarItem(widget: Icon(Icons.settings), name: "Settings")
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom nav bar")),
      bottomNavigationBar: ScrollableReorderableNavBar(
        onItemTap: (arg) {
          setState(() {
            _selectedIndex = arg;
          });
        },
        onReorder: (oldIndex, newIndex) {
          final currItem = _items[_selectedIndex];
          if (oldIndex < newIndex) newIndex -= 1;
          final newItems = [..._items], item = newItems.removeAt(oldIndex);
          newItems.insert(newIndex, item);
          setState(() {
            _items = newItems;
            _selectedIndex = _items.indexOf(currItem);
          });
        },
        items: _items,
        selectedIndex: _selectedIndex,
        onDelete: (index) => setState(() => _items.removeAt(index)),
        deleteIndicationWidget: Container(
          padding: const EdgeInsets.only(bottom: 100),
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Wrap(
              alignment: WrapAlignment.center,
              crossAxisAlignment: WrapCrossAlignment.center,
              direction: Axis.vertical,
              children: [
                Text("Tap on nav item to delete it.",
                    style: Theme.of(context).textTheme.bodyText1,
                    textAlign: TextAlign.center),
                TextButton(onPressed: () {}, child: const Text("DONE"))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用scrollable_reorderable_navbar插件的示例代码。这个插件允许你创建一个可滚动且可以重新排序的导航栏。

首先,确保你的Flutter项目中已经包含了scrollable_reorderable_navbar插件。你可以在你的pubspec.yaml文件中添加以下依赖项:

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

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

接下来是一个完整的示例代码,展示了如何使用scrollable_reorderable_navbar插件:

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = ['Home', 'Search', 'Library', 'Profile', 'Settings'];
  final List<bool> isSelected = List<bool>.filled(5, false, growable: false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scrollable Reorderable Navbar Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: ScrollableReorderableNavbar(
          onReorder: (int oldIndex, int newIndex) {
            setState(() {
              // Swap items
              final String item = items.removeAt(oldIndex);
              items.insert(newIndex, item);

              // Adjust isSelected list accordingly
              final bool isSelectedItem = isSelected.removeAt(oldIndex);
              isSelected.insert(newIndex, isSelectedItem);
            });
          },
          items: items.map((String item, int index) => ScrollableReorderableNavItem(
            text: item,
            isSelected: isSelected[index],
            onTap: () {
              setState(() {
                for (int i = 0; i < isSelected.length; i++) {
                  isSelected[i] = i == index;
                }
              });
            },
          )).toList(),
        ),
      ),
    );
  }
}

代码解释:

  1. 依赖项

    • 确保在pubspec.yaml中添加了scrollable_reorderable_navbar依赖项。
  2. MyApp

    • 创建一个基本的Flutter应用,并设置主题。
  3. MyHomePage

    • 创建一个包含导航项的列表items
    • 创建一个与items长度相同的布尔列表isSelected,用于跟踪当前选中的导航项。
  4. _MyHomePageState

    • 使用ScrollableReorderableNavbar组件来显示导航项。
    • onReorder回调用于处理导航项的重新排序。
    • items通过map方法转换为ScrollableReorderableNavItem列表。
    • 每个ScrollableReorderableNavItem项具有文本、选中状态和点击回调。
  5. 点击回调

    • 当用户点击某个导航项时,将更新isSelected列表,以确保只有一个导航项被选中。

这个示例代码展示了如何使用scrollable_reorderable_navbar插件来创建一个可滚动且可以重新排序的导航栏,并处理导航项的点击事件。希望这对你有所帮助!

回到顶部