凸底栏组件(Convex Bottom Bar)使用指南

凸底栏组件(Convex Bottom Bar)使用指南

convex_bottom_barA Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.项目地址:https://gitcode.com/gh_mirrors/co/convex_bottom_bar

1. 项目目录结构及介绍

在convex_bottom_bar开源项目中，主要的目录结构如下：

• lib/：包含库的主要代码，包括convex_bottom_bar.dart和其他相关文件。
• example/：提供了一个示例应用程序，展示了如何在实际项目中集成convex_bottom_bar。
  • example/lib/main.dart：示例应用的启动文件，展示了组件的不同用法。
  • example/pubspec.yaml：示例应用的配置文件，依赖了convex_bottom_bar库。
• test/：测试目录，包含了对组件功能的测试用例。
• README.md：项目概述、安装说明和基本使用方法。
• CHANGELOG.md：更新日志，记录每次版本的变更。

2. 项目启动文件介绍

在example/lib/main.dart中，可以看到ConvexBottomBar组件的基本使用方式。该文件初始化一个Scaffold，其中的bottomNavigationBar属性被设置为ConvexAppBar实例。这是将组件引入到Flutter应用中的标准做法。例如：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    // 页面列表
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Convex Bottom Bar Example'),
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: _pages,
      ),
      bottomNavigationBar: ConvexAppBar(
        items: [
          TabItem(icon: Icons.home, title: '首页'),
          TabItem(icon: Icons.map, title: '发现'),
          // 更多Tab项...
        ],
        onTap: _onItemTapped,
        // 其他配置...
      ),
    );
  }
}

3. 项目的配置文件介绍

项目根目录下的pubspec.yaml是整个项目的配置文件，其中包含了项目元数据以及依赖关系。对于convex_bottom_bar库本身，它的pubspec.yaml可能包含如下内容：

name: convex_bottom_bar
description: A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar.
version: 3.2.0
author: Hacktons <<EMAIL>>
homepage: https://github.com/hacktons/convex_bottom_bar

environment:
  sdk: '>=2.7.0 <3.0.0'

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  # 指定资产路径
  assets:

而在example/pubspec.yaml中，你会看到convex_bottom_bar作为依赖被引入：

name: convex_bottom_bar_example
description: Example project demonstrating how to use the convex_bottom_bar package.

dependencies:
  flutter:
    sdk: flutter
  convex_bottom_bar: ^3.2.0

这里的^3.2.0表示依赖convex_bottom_bar的最低版本为3.2.0，但允许任何高于3.2.0且小于4.0.0的版本，以确保兼容性更新。

convex_bottom_barA Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.项目地址:https://gitcode.com/gh_mirrors/co/convex_bottom_bar