Flutter 构建一个常用的页面框架
作者:岛上码农 发布时间:2022-10-02 02:54:19
目录
图标准备
BottomNavigationBar 简介
构建项目页面结构
简化入口
代码复用
最终实现的结果如上图所示,顶部共用一个导航栏,底部有四个图标导航,点击对应的图标跳转到对应的页面。
图标准备
本次例程需要4个图标,2种颜色,可以从 iconfont 中找到自己需要的图标下载不同的颜色使用。然后在 pubspec.yaml 中的 assets 指定素材所在目录。需要注意的是如果是 png 文件直接指定整个目录即可,但如果是 jpg 格式,则需要同时指定文件名及后缀。
BottomNavigationBar 简介
BottomNavigationBar的构造函数如下:
BottomNavigationBar({
Key? key,
required this.items,
this.onTap,
this.currentIndex = 0,
this.elevation,
this.type,
Color? fixedColor,
this.backgroundColor,
this.iconSize = 24.0,
Color? selectedItemColor,
this.unselectedItemColor,
this.selectedIconTheme,
this.unselectedIconTheme,
this.selectedFontSize = 14.0,
this.unselectedFontSize = 12.0,
this.selectedLabelStyle,
this.unselectedLabelStyle,
this.showSelectedLabels,
this.showUnselectedLabels,
this.mouseCursor,
})
其中常用的属性为:
items:及对应的页面组件数组
currentIndex:默认显示第几个页面
type:组件类型,使用BottomNavigationBarType枚举,有 fixed 和 shifting 两种。fixed 是图标固定位置,而 shifting 的图标点击后会有一个漂移效果,可以实际试一下,一般用fixed 比较多。
onTap:点击后的事件,一般用这个更新状态数据,以便更新页面。
其他属性用于控制样式的,可以根据实际需要设置图标大小,主题色,字体等参数。
构建项目页面结构
首先,新建四个业务页面,分别是 dynamic.dart,message.dart,category.dart 和 mine.dart,分别对应动态、消息、分类浏览和个人中心四个页面。目前这四个页面很简单,只是在页面中间依次显示“岛上码农”四个字。代码都是类似的,以 dynamic 为例:
import 'package:flutter/material.dart';
class DynamicPage extends StatelessWidget {
const DynamicPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('岛'),
),
);
}
}
注意的是这里的 Scaffold 没有 AppBar 了,这是因为在首页已经有了,如果再有 AppBar 就会出现两个。
其次,新建首页,用于管理四个业务页面,命名为 app.dart。app.dart 使用了 BottomNavigationBar 管理四个业务页面的切换。
import 'package:flutter/material.dart';
import 'dynamic.dart';
import 'message.dart';
import 'category.dart';
import 'mine.dart';
class AppHomePage extends StatefulWidget {
AppHomePage({Key key}) : super(key: key);
@override
_AppHomePageState createState() => _AppHomePageState();
}
class _AppHomePageState extends State<AppHomePage> {
int _index = 0;
List<Widget> _homeWidgets = [
DynamicPage(),
MessagePage(),
CategoryPage(),
MinePage(),
];
void _onBottomNagigationBarTapped(index) {
setState(() {
_index = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('岛上码农'),
),
body: IndexedStack(
index: _index,
children: _homeWidgets,
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _index,
onTap: _onBottomNagigationBarTapped,
items: [
_getBottomNavItem(
'动态', 'images/dynamic.png', 'images/dynamic-hover.png', 0),
_getBottomNavItem(
' 消息', 'images/message.png', 'images/message-hover.png', 1),
_getBottomNavItem(
'分类浏览', 'images/category.png', 'images/category-hover.png', 2),
_getBottomNavItem(
'个人中心', 'images/mine.png', 'images/mine-hover.png', 3),
],
),
);
}
BottomNavigationBarItem _getBottomNavItem(
String title, String normalIcon, String pressedIcon, int index) {
return BottomNavigationBarItem(
icon: _index == index
? Image.asset(
pressedIcon,
width: 32,
height: 28,
)
: Image.asset(
normalIcon,
width: 32,
height: 28,
),
label: title,
);
}
}
这里关键的地方有两个,一是使用的 IndexedStack,这是一个管理页面显示层级的容器。使用 index 属性确定当前容器里那个页面在最顶上,容器里的页面通过 children 属性设置,要求是一个 Widget 数组。因此,逻辑就是当 BottomNavigationBar 中的图标被点击后,对应点击事件会回调 onTap属性指定的方法,将当前的点击索引值传递回调函数,因此可以利用这个方式控制 IndexedStack 的页面层级切换。
最后,使用了状态变量_index 存储IndexedStatck当前显示页面的索引值,然后当 BottomNavigationBar的图标点击事件发生后,在回调函数中使用 setState 更新状态变量_index 来刷新当前界面。
简化入口
main.dart 是入口文件,应当做最基础的配置和全局初始化配置,而不应该有业务代码,因此可以简化为从main 方法加载首页即可。通过这种方式可以让 main.dart 文件即为简洁。这也是在开发的时候需要注意的地方,将不相关的代码剥离,相关的代码聚合,即所谓的“高内聚,低耦合”原则。
import 'package:flutter/material.dart';
import 'app.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'App 框架',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AppHomePage(),
);
}
}
代码复用
写代码的时候要注意复用,在这里将构建 BottomNavigationBar 元素抽离出了一个构建方法_getBottomNavItem,从而提高代码的复用性和维护性,也可以避免 Flutter 的组件构建的 build 方法中出现过多的元素和嵌套,影响代码的可读性。
来源:https://juejin.cn/post/6963634035037831181
猜你喜欢
- 前言刚看到这个题目的朋友第一反应肯定是好奇,之后再细细思考下就会发现这个题目眼熟了。就算是同一个答案,如果提问的方式不同,往往会对回答造成干
- 本项目为大家分享了Java实现简单计算器功能的具体代码,供大家参考,具体内容如下一 项目说明实训目的:掌握 Java GUI 开发中的布局管
- 前言由于业务需要,后端需要返回一个树型结构给前端,包含父子节点的数据已经在数据库中存储好,现在需要做的是如何以树型结构的形式返给给前端。数据
- 引言RecyclerView是在Android5.0版本作为support-v7的一个组件出现,高效替代了最初的ListView等列表组件。
- 在日常开发中,可能会遇到同一份代码,需要根据运营需求打出不同包名、不同图标、不同名称的Apk,发布到不同的渠道中。Android Studi
- 在上一篇文章中我介绍了使用Intent显式来实现页面向下跳转,接下来这篇文章主要介绍的是使用Intent隐式来实现向上跳转,什么意思呢,就是
- Socket里面的协议解析是Socket通讯程序设计中最复杂的地方,如果你的应用层协议设计或实现不佳,Socket通讯中常见的粘包,分包就难
- 本文将带领大家实现第一个用eclipse写的第一个Javaweb项目–简单购物车。文章会在问题分析、具体实现和常见问题这三块为大家详细解说。
- 本文实例讲述了Android编程入门之HelloWorld项目目录结构。分享给大家供大家参考,具体如下:我们介绍了如何搭建Android开发
- 默认配置默认配置比较低,打开稍大点的项目就很容易卡掉,所以最好扩大一下内存。IntelliJ IDEA的VM配置IntelliJ IDEA2
- 发现问题:问题如图所示,在eclipse中开启tomcat服务器时报错:端口已被占用。这是因为在tomcat开启的状态下,eclipse异常
- Bean Validation 中内置的 constraint @Null 被注释的元素必须为 null @NotNull 被注释的元素必须
- 前言基本语法首先我们要知道java的基础语法。1.由26个英文字母大小写,0-9,_或$组成2.数字不可以开头3.不可以使用关键字和保留字,
- 1. 服务端配置java启动命令增加以下参数即可:-Dcom.sun.management.jmxremote \-Dcom.sun.man
- 1. 传统方式:在内存中读取文件内容读取文件行的标准方式是在内存中读取,Guava 和Apache Commons IO都提供了如下所示快速
- 简介MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改
- 如图所示的效果相信大家都不陌生,我们可以使用很多种方法去实现此效果,这里自己采用CountDownTimer定时器简单封装下此效果,方便我们
- 上次简单的说了一下CoordinatorLayout的基本用法(android特性之CoordinatorLayout用法探析实例)。其中C
- 一、 springBoot + Mybatis配置完成后,访问数据库遇到的问题首先出现这个问题,肯定是xml文件与mapper接口没有匹配上
- 目录前言闲扯使用技术所需知识储备实现步骤总结前言现代互联网项目中,很多场景下都需要使用一种叫做验证码的技术,常用的有图片验证码,滑块验证码,