关于flutter:Flutter-Convex-Bottom-底部导航

https://medium.flutterdevs.co…

https://github.com/flutter-de…

https://pub.dev/packages/conv…

convex Bottom 底部条是一个应用程序 sketch 图，它的形态是 convex Bottom 的。它能够使用户界面看起来很棒，也能够改良用户与界面的交互方式。在本文中，咱们将建设一个简略的应用程序与最简略的模式之一，在 Flutter convex Bottom bar

引言

增加依赖性

如何应用

性能

属性

施行

总结

GitHub 链接

大家好，明天咱们要探讨的是一个十分重要的对于 Flutter UI 的话题，这个话题就是底层导航栏。在本文中，咱们理解了 Convex Bottom Bar。Convex Bottom Bar 是一种 Flutter 包装。Convex Bottom 的底部条是一个应用程序栏草图这样的形式，有一个 convex Bottom 状它。它能够使用户界面看起来很棒，也能够改良用户与界面的交互方式。在本文中，咱们将构建一个简略的应用程序与最简略的模式之一的Convex Bottom Bar。

查看列表 TabItems 小部件，您能够解释在 appbar 中显示的图标和它们的题目。列表应该只蕴含奇数的 TabItems 来运行小部件，而不会引起舛误。如果要显示图像或图标，能够为每个 TabItem 小部件中的图标变量提供图像。如果你想生成一个图标底部 appbar，你能够应用 ConvexButton.fab 小部件。它生成的参数更少，并且有一个疾速丑陋的单图标 appbar。

在你的我的项目中去 pubspec。增加依赖项: 增加 https://pub.dev/packages/conv… 的最新版本。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  convex_bottom_bar: ^3.0.0

咱们应用 convax_bottom_bar 来创立一个更好的 bootobar UI。

通常，ConvexAppBar 能够通过设置它的 bottomNavigationBar 来与脚手架一起工作。convexAppBar 有两个构造函数，convexAppBar ()将应用 levant 款式简化制表符的创立。将其增加到包的 pubspec.yaml 文件中，应用最新版本。

Scaffold(body: bottomNavigationBar: ConvexAppBar();
);

提供各种外部样式
能够更改 AppBar 的主题。
提供用于批改新款式的构建器 API。
在选项卡菜单中退出徽章。
柔美的过渡动画
提供钩子 API 来笼罩一些外部款式。
RTL 补强

上面是 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 (设置圆形色彩)

在 Convex_Bottom_Bar 演示中，首先，咱们在这个类中创立一个名为 MyHomePage ()的有状态类，咱们创立一个值为 0 的变量 selectedpage 类型的 integer pass。定义一个名为 pageNo 的列表，在这个列表中咱们传递要增加到 bootom 导航栏中的所有页面。

int selectedpage =0;
final _pageNo = [Home() , Favorite() , CartPage() , ProfilePage()];

在 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;});
  },
),

如果咱们创立不同的页面, 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(
      body: Center(
        child: Text('Home Page',
          style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold
          ),),
      ),
    );
  }
}

Favorite 最喜爱的屏幕:

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

class Favorite extends StatefulWidget {const Favorite({Key? key}) : super(key: key);

  @override
  _FavoriteState createState() => _FavoriteState();
}

class _FavoriteState extends State<Favorite> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors._greenAccent_,
     body: Center(
          child: Text('Favorite Page',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight._bold_ ),
          )),
    );
  }
}

CartPage 屏幕:

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

class CartPage extends StatefulWidget {const CartPage({Key? key}) : super(key: key);

  @override
  _CartPageState createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors._pink_.shade100,
      body: Center(
          child: Text('Cart Page',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight._bold_ ),)),
    );
  }
}

\_ProfilePage 个人资料页面:

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

class ProfilePage extends StatefulWidget {const ProfilePage({Key? key}) : super(key: key);

  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors._yellow_,
      body: Center(
          child: Text('Profile Page',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight._bold_ ),)),
    );  }
}

当咱们运行应用程序，咱们应该失去屏幕的输入像上面的屏幕视频。

本文介绍了什么是 Convex Bottom Bar 以及如何在 Flutter 法中实现Convex Bottom Bar。你能够依据本人的须要应用这个包。

如果我做错了什么，请在评论中通知我，我很乐意改良。

鼓掌如果这篇文章对你有帮忙的话。

https://github.com/flutter-de…

微信 ducafecat
博客 ducafecat.tech
github
bilibili

关于flutter:Flutter-Convex-Bottom-底部导航

原文

代码

参考

注释

目录:

简介:

增加依赖项:

如何应用:

特点:

属性:

实施方案:

结语:

GitHub Link: