欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-18 11:42:28
目录添加依赖项如何使用功能属性主题预览图代码flutter web问题:failed to load network image我的解决办法参考资料convexbottombar是一个底部导航栏组件,...

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会使用默认样式

预览图

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

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

代码

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实现底部导航栏创建详解

我的解决办法

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

flutter run --web-renderer html

flutter run -d chrome --web-renderer html

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

参考资料

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

https://github.com/hacktons/convex_bottom_bar

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