Flutter底部导航栏插件dghub_bottombar的使用

Flutter底部导航栏插件dghub_bottombar的使用

DGHub Studio

DGHub Studio

Buy Me a Coffee

安装

在你的pubspec.yaml文件的dependencies:部分添加以下行：

dependencies:
  dghub_bottombar: <latest_version>

导入包

import 'package:dghub_bottombar/dghub_bottombar.dart';

示例：底部导航栏的使用

以下是一个简单的示例，展示如何在应用中使用DGHubBottomBarListWidget。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: SafeArea(
          child: DGHubBottomBarListWidget(
        result: (selected) {},
        init: BottomBarStyle(),
      )),
    );
  }
}

获取所有底部导航栏

DGHubBottomBarListWidget(result: (selected) {})

DGHub BottomBar Icon 示例

DGHubBottomBarIcon(
  type: DGHubBottomBarType.material3,
  config: BottomBarConfig(
    enabledBadage: true,
    badageLabel: '0',
    badageColor: Colors.blue,
    icon: Icons.notifications_none,
    onTap: () {}
  )
)

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

1 回复

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


dghub_bottombar 是一个 Flutter 插件，用于创建自定义的底部导航栏。它提供了丰富的配置选项，允许开发者轻松实现各种样式的底部导航栏。

安装

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

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

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

基本使用

以下是一个简单的使用 dghub_bottombar 创建底部导航栏的示例：

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

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

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

class BottomNavigationExample extends StatefulWidget {
  @override
  _BottomNavigationExampleState createState() => _BottomNavigationExampleState();
}

class _BottomNavigationExampleState extends State<BottomNavigationExample> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DGHub BottomBar Example'),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: DGHubBottomBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          DGHubBottomBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          DGHubBottomBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          DGHubBottomBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
      ),
    );
  }
}

参数说明

  • currentIndex: 当前选中的底部导航栏项的索引。
  • onTap: 当用户点击某个底部导航栏项时触发的回调函数。
  • items: 底部导航栏项的列表，每个项由 DGHubBottomBarItem 组成。

DGHubBottomBarItem 参数

  • icon: 底部导航栏项的图标。
  • title: 底部导航栏项的标题。

自定义样式

dghub_bottombar 提供了丰富的自定义选项，例如：

  • backgroundColor: 底部导航栏的背景颜色。
  • selectedItemColor: 选中项的颜色。
  • unselectedItemColor: 未选中项的颜色。
  • showSelectedLabels: 是否显示选中项的标签。
  • showUnselectedLabels: 是否显示未选中项的标签。
DGHubBottomBar(
  backgroundColor: Colors.blue,
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.grey,
  showSelectedLabels: true,
  showUnselectedLabels: false,
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: [
    DGHubBottomBarItem(
      icon: Icon(Icons.home),
      title: Text('Home'),
    ),
    DGHubBottomBarItem(
      icon: Icon(Icons.search),
      title: Text('Search'),
    ),
    DGHubBottomBarItem(
      icon: Icon(Icons.person),
      title: Text('Profile'),
    ),
  ],
)
回到顶部