Flutter实现底部导航栏创建详解

convexbottombar是一个底部导航栏组件，用于展现凸起的tab效果，支持多种内置样式与动画交互。你可以在https://appbar.codemagic.app/上找到在线样例。

添加依赖项

在你的项目中去 pubspec。添加依赖项: 添加https://pub.dev/packages/convex_bottom_bar的最新版本。

运行下列代码，添加依赖

flutter pub add convex_bottom_bar     

environment:
  sdk: '>=2.12.0 <3.0.0'
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  convex_bottom_bar: ^3.0.0

我们使用convax_bottom_bar 来创建一个非常nice的底部导航栏。

如何使用

通常， 「convexappbar」 可以通过设置它的 bottomnavigationbar 来与脚手架一起工作。convexappbar具有两个构造函数，convexappbar()将使用默认样式来简化选项卡的创建。

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

scaffold(
  bottomnavigationbar: convexappbar(
    items: [
      tabitem(icon: icons.home, title: 'home'),
      tabitem(icon: icons.map, title: 'discovery'),
      tabitem(icon: icons.add, title: 'add'),
      tabitem(icon: icons.message, title: 'message'),
      tabitem(icon: icons.people, title: 'profile'),
    ],
    initialactiveindex: 2,//optional, default as 0
    ontap: (int i) => print('click index=$i'),
  )
);

功能

• 提供多种内部样式
• 能够更改appbar的主题
• 提供builder api以自定义新样式
• 在appbar上添加徽章
• 支持优雅的过渡动画
• 提供hook api来重载一些内部样式
• rtl布局支持

关于支持的样式，可以从这儿查看

https://pub.flutter-io.cn/packages/convex_bottom_bar

属性

下面是 「*convex_bottom_bar*」 的一些属性:

• 「fixed」 (副标题图标停留在中心)
• 「fixedcircle」 (相同，但在固定图标的所有边上都有一个白色的圆圈)
• 「react」 (上标图标取代点击另一个图标)
• 「reactcircle」 (与上标图标中的白色圆圈相同)
• 「textin」 (选定的离子出现相应的标题)
• 「titled」 (未选择的图标是显示其标题的单个图标)
• 「flip」 (点击图标显示一个 flip 动画)
• 「custom」 (使用 convexbottomappbar 构建器自定义预定义的参数)
• 「height」 (grabbing the appbar)
• 「top」 (grabbing the superscripted icon)
• 「curvesize」 (拉伸上标图标的曲线)
• 「color」 (设置图标的颜色)
• 「backgroundcolor」 (设置 appbar 背景颜色)
• 「gradient」 (使用渐变小部件设置 appbar 背景颜色)
• 「activecolor」 (设置圆形颜色)

主题

appbar默认使用内置样式，您可能需要为其设置主题。 以下是一些支持的属性：

attributes	description
backgroundcolor	appbar 背景
gradient	渐变属性，可以覆盖backgroundcolor
height	appbar 高度
color	icon/text 的颜色值
activecolor	icon/text 的选中态颜色值
curvesize	凸形大小
top	凸形到appbar上边缘的距离
style	支持的样式: fixed, fixedcircle, react, reactcircle, ...
chipbuilder	角标构造器builder, convexappbar.badge会使用默认样式

预览图

代码

在 convex_bottom_bar 演示中，首先，我们在这个类中创建一个名为 myhomepage ()的有状态类，我们创建一个值为 0 的变量 selectedpage 类型的 integer pass。定义一个名为 pagelist的列表，在这个列表中我们传递要添加到 bootom 导航栏中的所有页面。

  int selectedpage = 0;
  final _pagelist= [home(), message(), persion(), detail()];

在 buildcontext ()中，我们定义 scaffold。

appbar: appbar(
  centertitle: true,
  title: text('convex bottom bar'),
),

首先在正文中传递 _pageno，其值为 selectedpage。使用 scaffold 属性，我们使用 bottomnavigationbar。在这里，我们创建 convexappbar ()并传递 items、 initialactiveindex 和 ontap。在条目中，我们通过所有的屏幕，我们希望在我们的应用程序中显示。在 initialactiveindexwe 中，我们传递已经定义的变量 selectedpage，在 ontap 中，我们传递 index 并在 setstate 中定义 setstate () ，我们传递 selectedpage 相当于 index。

bottomnavigationbar: convexappbar(
  items: [
    tabitem(icon: icons._home_, title: 'home'),
    tabitem(icon: icons._favorite_, title: 'favorite'),
    tabitem(icon: icons._shopping_cart_, title: 'cart'),
    tabitem(icon: icons._person_, title: 'profile'),
  ],
  initialactiveindex: selectedpage,
  ontap: (int index){
      setstate(() {
        selectedpage = index;
      });
  },
),

main.dart

import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
import 'detail.dart';
import 'home.dart';
import 'message.dart';
import 'persion.dart';

void main() {
  runapp(myapp());
}

class myapp extends statelesswidget {
  // this widget is the root of your application.
  @override
  widget build(buildcontext context) {
    return materialapp(
      debugshowcheckedmodebanner: false,
      theme: themedata(
        primaryswatch: colors.teal,
      ),
      home: myhomepage(),
    );
  }
}

class myhomepage extends statefulwidget {
  @override
  _myhomepagestate createstate() => _myhomepagestate();
}

class _myhomepagestate extends state<myhomepage> {
  int selectedpage = 0;
  final _pageno = [home(), message(), persion(), detail()];

  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        centertitle: true,
        title: text('convex bottom bar'),
      ),
      body: _pageno[selectedpage],
      bottomnavigationbar: convexappbar(
           color: colors.white,
        activecolor: colors.red,
        backgroundcolor: colors.orange,
        items: [
          tabitem(icon: icons.person, title: '新'),
          tabitem(icon: icons.favorite, title: '年'),
          tabitem(icon: icons.brush, title: '快'),
          tabitem(icon: icons.car_rental, title: '乐'),
        ],
        initialactiveindex: selectedpage,
        ontap: (int index) {
          setstate(() {
            selectedpage = index;
          });
        },
      ),
    );
  }
}

如果我们创建不同的页面, home(), favorite(), cartpage(), profilepage(). 在 home 类中，我们定义一个带有背景颜色的文本。

home 页

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

class home extends statefulwidget {
  const home({key? key}) : super(key: key);

  @override
  _homestate createstate() => _homestate();
}

class _homestate extends state<home> {
  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        centertitle: true,
        title: text('欢迎来到这儿'),
      ),
      body: center(
        child: text(
          '早起的年轻人',
          style: textstyle(fontsize: 60, fontweight: fontweight.bold),
        ),
      ),
    );
  }
}

message页:

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

class message extends statefulwidget {
  const message({key? key}) : super(key: key);

  @override
  _messagestate createstate() => _messagestate();
}

class _messagestate extends state<message> {
  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        centertitle: true,
        title: text('这是当前页的appbar'),
      ),
      body: center(
        child: text(
          '因为硬核，所以坚果！',
          style: textstyle(fontsize: 60, fontweight: fontweight.bold),
        ),
      ),
    );
  }
}

persion页

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

class persion extends statefulwidget {
  const persion({key? key}) : super(key: key);

  @override
  _persionstate createstate() => _persionstate();
}

class _persionstate extends state<persion> {
  @override
  widget build(buildcontext context) {
    return scaffold(  appbar: appbar(
        centertitle: true,
        title: text('公众号'),
      ),
      body: center(
        child: text(
          '大前端之旅',
          style: textstyle(fontsize: 60, fontweight: fontweight.bold),
        ),
      ),
    );
  }
}

detail页面

// ignore: file_names
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class detail extends statefulwidget {
  const detail({key? key}) : super(key: key);

  @override
  _detailstate createstate() => _detailstate();
}

class _detailstate extends state<detail> {
  string image =
      "https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20220114111115931.png";
  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        centertitle: true,
        title: text('扫码关注'),
      ),
      body: center(
        child: new image(image: new networkimage(image)),
      ),
    );
  }
}

当我们运行应用程序，我们应该得到屏幕的输出像下面的报错信息。

这是一个

flutter web问题：failed to load network image

我的解决办法

flutter build web --release --web-renderer html

flutter run --web-renderer html

flutter run -d chrome --web-renderer html

参考资料

https://pub.flutter-io.cn/packages/convex_bottom_bar

https://github.com/hacktons/convex_bottom_bar

以上就是flutter实现底部导航栏创建详解的详细内容，更多关于flutter底部导航栏创建的资料请关注其它相关文章！