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

目录

添加依赖项如何使用功能属性主题预览图代码flutter web问题：failed to load network image我的解决办法参考资料

convexbottombar是一个底部导航栏组件，用于展现凸起的tab效果，支持多种内置样式与动画交互。你可以在/d/file/titlepic/h2p在你的项目中去 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默认使用内置样式，您可能需要为其设置主题。 以下是一些支持的属性：

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

预览图

代码

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

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

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

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

首先在正文中传递 _pageno，其值为 lectedpage。使用 scaffold 属性，我们使用 bottomnavigationbar。在这里，我们创建 convexappbar ()并传递 items、 initialactiveindex 和 ontap。在条目中，我们通过所有的屏幕，我们希望在我们的应用程序中显示。在 initialactiveindexwe 中，我们传递已经定义的变量 lectedpage，在 ontap 中，我们传递 index 并在 tstate 中定义 tstate () ，我们传递 lectedpage 相当于 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: lectedpage,  ontap: (int index){      tstate(() {        lectedpage = 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: fal,      theme: themedata(        primaryswatch: colors.teal,      ),      home: myhomepage(),    );  }}class myhomepage extends statefulwidget {  @override  _myhomepagestate createstate() => _myhomepagestate();}class _myhomepagestate extends state<myhomepage> {  int lectedpage = 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[lectedpage],      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: lectedpage,        ontap: (int index) {          tstate(() {            lectedpage = 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_namesimport 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class detail extends statefulwidget {  const detail({key? k最美孝心少年颁奖典礼观后感ey}) : super(key: key);  @override  幸福渠水到俺村_detailstate createstate() => _detailstate();}class _detailstate extends state<detail&g测量学实习总结t; {  string image =      "/d/file/titlepic/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

我的解决办法

fl学生的朋友2utter build web –relea –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底部导航栏创建的资料请关注www.887551.com其它相关文章！