Flutter实现底部导航栏创建详解
作者:大前端之旅 发布时间:2023-09-29 10:01:04
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会使用默认样式 |
预览图
代码
在 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
来源:https://juejin.cn/post/7053273915631763464
猜你喜欢
- 1 运算符1.1 概述运算符 用于连接 表达式 的 操作数,并对操作数执行运算。例如,表达式num1+num2,其操作数是num1和num2
- 本文实例讲述了Android编程之ListView和EditText发布帖子隐藏软键盘功能。分享给大家供大家参考,具体如下:在Android
- C#编写winform程序时,用到的,格式强转,存储到数据库,数据库连接那块就不写了希望对大家有帮助,欢迎评论互相分享技术!//日期格式强制
- .Net为我们提供了众多的泛型集合。比如,Stack<T>先进后出,Queue<T>先进先出,List<T&g
- IO流Java中IO流分为两种,字节流和字符流,顾名思义字节流就是按照字节来读取和写入的,字符刘是按照字符来存取的;常用的文件读取用的就是字
- 在Java中,泛型的引入是为了在编译时提供强类型检查和支持泛型编程。为了实现泛型,Java编译器应用类型擦除实现: &
- 本文实例为大家分享了C++实现幸运大抽奖的具体代码,供大家参考,具体内容如下程序效果:#ifndef DIALOG_H#define DIA
- 前端使用的是vue+elementui,这款系统只适合学习巩固SpringBoot+VUE,后面还要在这上面加校园公告、校园零食等功能,后期
- 本文实例为大家分享了Android自定义输入法软键盘的具体代码,供大家参考,具体内容如下1 功能描述触屏设备主界面中有一个文本编辑框,底部区
- OAuth2简介OAuth 是一个开放标准,该标准允许用户让第三方应用访问该用户在某一网站上存储的私密资源(如头像、照片、视频等),而在这个
- 题目题目背景若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系。思路对
- 业务场景我们知道在使用PageHelper分页插件时,会对执行PageHelper.startPage(pageNum, pageSize)
- 概述在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法。示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页、下页、上
- 摘要:Java8通过Function获取字段名,解决硬编码,效果类似于mybatis-plus的LambdaQueryWrapper。本文总
- 一、运算符运算符包括下面几种:算术运算符赋值运算符比较运算符逻辑运算符位运算符三目运算符最不常用的是位运算符,但也是最接近计算机底层的。1、
- 这里的万年历制作主要用到了Calendar类和GregorianCalendar类,我们先来回顾一下基础知识:基础部分一、Cal
- Kotlin 支持泛型, 语法和 Java 类似。例如,泛型类:class Hello<T>(val value: T)val
- newInstance()使用类加载机制,new是创建一个新类。从JVM角度看,使用new创建一个类的时候,这个类可以没有被加载。但是使用n
- 数据库事务是后端开发中不可缺少的一块知识点。Spring为了更好的支撑我们进行数据库操作,在框架中支持了两种事务管理的方式: 编程式事务声明
- 1、jdbc1) 含义:JDBC是java语言连接数据库,Java Date Base Connectivity2) jdbc的本质:在编程