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

40次阅读

共计 4535 个字符，预计需要花费 12 分钟才能阅读完成。

原文

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。你能够依据本人的须要应用这个包。

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

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

GitHub Link:

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

© 猫哥

  • 微信 ducafecat
  • 博客 ducafecat.tech
  • github
  • bilibili

正文完
flutter
发表至： flutter
2022-01-13
 0
关于flutter:Flutter事件响应源码分析
关于flutter:抢鲜解读Flutter-37更新啦
关于flutter:Flutter-dio如何设置网络代理
关于flutter:为什么选择Flutter-进行跨平台开发