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默认使用内置样式,您可能需要为其设置主题。 以下是一些支持的属性:

AttributesDescription
backgroundColorAppBar 背景
gradient渐变属性,可以覆盖backgroundColor
heightAppBar 高度
coloricon/text 的颜色值
activeColoricon/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底部导航栏创建的资料请关注云海天教程其它相关文章!