Flutter移动电商实战 --（3）底部导航栏制作
2024-09-01 18:42:21
1、cupertino_IOS风格介绍
在Flutter里是有两种内置风格的：
- material风格： Material Design 是由 Google 推出的全新设计语言，这种设计语言是为手机、平板电脑、台式机和其他平台提供一致，更广泛的外观和感觉。我喜欢称它为纸墨设计。Material Design 风格是一种非常有质感的设计风格，并会提供一些默认的交互动画。
- cupertino风格：即 IOS 风格组件，它重现了很多经典的有 IOS 特性的交互和界面风格，让适用于 IOS 的人感觉亲切和友好。
并非选择了一种风格，就要一直使用这种风格，事实是你可以一起使用，兼顾两个风格的特点。
我们在 index_page.dart 页面同时使用两种风格 UI ，只需要在头部分引入了 cupertino.dart、material.dart。注意这两个引入是不分先后顺序的。
index_page.dart 文件：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
2、使用动态StatefulWidget
上篇文章为了测试入口文件，我们在 index_page.dart 文件里使用了静态组件（也就是继承了StatelessWidget）。
正常情况下，底部导航栏是要根据用户操作不断变化的，所以我们改用动态组件（StatefulWidget）。
修改后的代码如下:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart'; class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
} class _IndexPageState extends State<IndexPage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("百姓生活+"),),
body: new Center(
child: Text("我是居中的文本内容"),
),
);
}
}
改编后的界面效果并未发生改变，不截图了。
3、底部栏
有了动态组件，接下来可以在State部分先声明一个List变量，变量名称为boottomTabs，变量的属性为BottomNavigationBarItem。
其实这个List变量就定义了底部导航的文字和使用的图标。
代码如下:
final List<BottomNavigationBarItem> bottomTabs = [
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.home),
title:Text('首页')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.search),
title:Text('分类')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.shopping_cart),
title:Text('购物车')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.profile_circled),
title:Text('会员中心')
),
];
底栏的数据有了，怎么使用呢？
修改后的 index_page.dart 文件：
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart'; class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
} class _IndexPageState extends State<IndexPage> { final List<BottomNavigationBarItem> bottomTabs = [
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.home),
title:Text('首页')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.search),
title:Text('分类')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.shopping_cart),
title:Text('购物车')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.profile_circled),
title:Text('会员中心')
),
]; @override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("百姓生活+"),),
body: new Center(
child: Text("我是居中的文本内容"),
),
bottomNavigationBar: BottomNavigationBar(
type:BottomNavigationBarType.fixed,
currentIndex: 0,
items:bottomTabs,
onTap: (index){ },
),
);
}
}
效果图：
下篇将打通4非底部导航栏，关于界面切换以及底栏的实现可参考之前写的一篇文章：
Flutter实 ViewPager、bottomNavigationBar界面切换
最新文章
- css 简析folat
- JS获取当前浏览器的类型
- 解决IE上登陆oracle OEM时报：“证书错误，导航已阻止”的错误
- 【ZOJ 3870】 Team Formation
- jQuery 显示加载更多(节流) 实现预加载
- 【转载】synchronized 与 Lock 的那点事
- [二]java运行原理
- Android-自己定义图像资源的使用（1）
- Repeated Substring Pattern Leetcode
- JS中5种经典继承方式
- iOS----------viewcontroller中的dealloc方法不调用
- Python3 获取本机 IP
- SpringBoot系列: Spring MVC视图方法的补充
- HTML5 学习05—— 拖放（Drag 和 Drop）
- Solr复杂条件查询
- Java 内存模型简单剖析
- Code Review —— by12061154Joy
- PHP正则表达式函数的替代函数
- [golang note] 环境搭建
- 自己理解BFC 和 stack context , stack order