Flutter圆形导航插件circle_navigation的使用

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

Flutter圆形导航插件circle_navigation的使用

开始使用

要安装 circle_navigation 插件，你需要将其添加到你的 pubspec.yaml 文件中：

dependencies:
  circle_navigation:

然后在 Dart 文件中导入该库：

import 'package:circle_navigation/circle_navigation.dart';

使用示例

CircleNavigation 可以用作 Scaffold 的 bottomNavigationBar 属性。以下是一个完整的示例代码，展示了如何使用 CircleNavigation 插件。

完整示例代码

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

void main() => runApp(const MaterialApp(home: MyApp()));

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late int initIndex;
  late PageController pageController;

  [@override](/user/override)
  void initState() {
    super.initState();
    initIndex = 0;
    pageController = PageController(initialPage: initIndex);
  }

  [@override](/user/override)
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        body: PageView(
          controller: pageController,
          physics: const NeverScrollableScrollPhysics(), // 禁止页面滚动
          children: const [
            Icon(Icons.home, color: Colors.green, size: 150), // 首页图标
            Icon(Icons.account_circle, color: Colors.green, size: 150), // 用户图标
            Icon(Icons.settings, color: Colors.green, size: 150), // 设置图标
          ],
        ),
        bottomNavigationBar: CircleNavigation(
          initIndex: initIndex, // 初始选中项索引
          items: [
            Item(
                icon: const Icon(
                  Icons.home,
                  color: Colors.white,
                  size: 30, // 图标大小
                ),
                label: 'Home'), // 标签文本
            Item(
                icon: const Icon(
                  Icons.account_circle,
                  color: Colors.white,
                  size: 30,
                ),
                label: 'User'),
            Item(
                icon: const Icon(
                  Icons.settings,
                  color: Colors.white,
                  size: 30,
                ),
                label: 'Settings'),
          ],
          textStyle: const TextStyle(
            color: Colors.white,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ), // 文本样式
          circleColor: Colors.green, // 圆形背景颜色
          navColor: Colors.blue, // 导航栏背景颜色
          onChange: (index) => pageController.animateToPage( // 页面切换动画
            index,
            duration: const Duration(milliseconds: 300),
            curve: Curves.ease,
          ),
        ),
      );
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用circle_navigation插件的示例代码。这个插件允许你创建一个圆形的导航栏，用户可以通过滑动或点击来切换不同的页面。

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

dependencies:
  flutter:
    sdk: flutter
  circle_navigation: ^最新版本号  # 替换为实际的最新版本号

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

接下来是一个简单的示例，展示如何使用circle_navigation来创建一个包含三个页面的圆形导航栏：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circle Navigation Example'),
        ),
        body: CircleNavigationExample(),
      ),
    );
  }
}

class CircleNavigationExample extends StatefulWidget {
  @override
  _CircleNavigationExampleState createState() => _CircleNavigationExampleState();
}

class _CircleNavigationExampleState extends State<CircleNavigationExample> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late List<Widget> _pages;

  @override
  void initState() {
    super.initState();
    _pages = [
      Center(child: Text('Page 1')),
      Center(child: Text('Page 2')),
      Center(child: Text('Page 3')),
    ];
    _tabController = TabController(length: _pages.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: CircleNavigation(
            items: _createNavigationItems(),
            onTabSelected: (index) {
              _tabController.index = index;
            },
          ),
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: _pages,
          ),
        ),
      ],
    );
  }

  List<CircleNavigationItem> _createNavigationItems() {
    List<CircleNavigationItem> items = [];
    for (int i = 0; i < _pages.length; i++) {
      items.add(
        CircleNavigationItem(
          icon: Icon(Icons.circle, color: Colors.blue),
          activeIcon: Icon(Icons.circle, color: Colors.red),
        ),
      );
    }
    return items;
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
}

在这个示例中：

  1. 我们定义了一个CircleNavigationExample类，它包含一个TabBarView来显示页面内容和一个CircleNavigation来显示圆形导航栏。
  2. CircleNavigation的items属性是一个CircleNavigationItem列表，每个CircleNavigationItem都包含一个图标和一个激活状态的图标。
  3. onTabSelected回调函数用于在用户选择导航项时更新TabBarView的当前页面。
  4. TabBarView使用_tabController来控制页面的切换。

请确保你已经正确安装并导入了circle_navigation插件，并根据你的实际需求调整代码。如果你需要更复杂的图标或交互，你可以自定义CircleNavigationItem的图标和激活状态的图标。

回到顶部