Flutter实现底部导航栏效果
作者:BrodyWu 发布时间:2022-03-28 05:41:46
标签:Flutter,导航栏
大家最近都在讨论新鲜技术-flutter,小编也在学习中,遇到大家都遇到的问题,底部导航。下面给大家贴出底部导航的编写,主要参考了lime这个项目。
上代码
一.在main.dart文件中
定义APP的基本信息
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: themeColor(),
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
其中主要代码部分
class _MyHomePageState extends State<MyHomePage> {
PageController pageController;
int page = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey,
body: new PageView(
children: [
new Index(),
new Classify(),
new Shopping(),
new Myself()
],
controller: pageController,
onPageChanged: onPageChanged
),
bottomNavigationBar: new BottomNavigationBar(items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.laptop_chromebook),
title: new Text("主页"),
backgroundColor: Colors.grey
),
new BottomNavigationBarItem(
icon: new Icon(Icons.list), title: new Text("分类"),backgroundColor: Colors.grey),
new BottomNavigationBarItem(
icon: new Icon(Icons.local_grocery_store), title: new Text("购物车")),
new BottomNavigationBarItem(icon: new Icon(Icons.person), title: new Text("我的"))
],
onTap: onTap,
currentIndex: page
),
);
}
@override
void initState() {
super.initState();
pageController = new PageController(initialPage: this.page);
}
void onTap(int index) {
pageController.animateToPage(
index, duration: const Duration(milliseconds: 300),
curve: Curves.ease);
}
void onPageChanged(int page) {
setState(() {
this.page = page;
});
}
}
其中,各个页面的主要声明
底部导航栏的内容填充
二.其他四个页面的主要代码
import 'package:flutter/material.dart';
class Classify extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
body: new Center(
child:
new Text("分类"),
),
);
}
}
其他3个页面的代码是一样的,具体逻辑由需求去填写
三.效果图
来源:https://blog.csdn.net/u011045726/article/details/79583423
0
投稿
猜你喜欢
- SpringBoot JPA分页查询指定列并返回指定实体用习惯Mybatis,没用过jpa 真是各种踩坑了脑壳疼,一个分页弄老半天,原来就一
- 程序目的从java字节码层理解,为何i = i++后,结果是+1之前的数值。而i=++i后,结果是+1之后的值。关键指令iload_<
- 介绍大家都知道微信支付的回调链接要求不能跟参数,但又要接收返回的xml数据。我开始使用@RequestBody注解在参数上,希望能获取xml
- AlertDialog可以在当前的界面上显示一个对话框,这个对话框是置顶于所有界面元素之上的,能够屏蔽掉其他控件的交互能力,因此AlertD
- Ribbon是Spring Cloud Netflix全家桶中负责负载均衡的组件,它是一组类库的集合。通过Ribbon,程序员能在不涉及到具
- 一、文件存储特点:openFileInput()和openFileOutput()读取设备上的文件。优点:适用于存储大量的数据,可以存储图片
- Java Socket(套接字)通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄。应用程序通常通过&qu
- 类加载子系统classLoader 只负责对字节码文件的加载,至于是否可以运行,还要看执行引擎。加载的类信息存放于方法区的内存空间,除了类信
- 一、前言对于任何框架而言,在使用前都要进行一系列的初始化,MyBatis也不例外。二、MyBatis的初始化做了什么2.1 Mybatis的
- 什么是ContentType?我们知道浏览器可以处理各种各样的内容,比如:HTML、XML、JPG、Flash等等,那么浏览器是如何区分它们
- 一、demo简介1.效果展示如下图,我截了三个瞬间,但其实这是一个连续的动画,就是这个大圆不停地吞下小圆。2.这个动画可以拆分为两部分,首先
- 本文实例讲述了Java使用JDBC实现Oracle用户认证的方法。分享给大家供大家参考,具体如下:两天时间写的小品,以前的J2EE环境基本使
- 作为一个合格的开发人员,对项目进行管理自然必不可少。今天就给各位看客介绍一下如何用git将自己的AS项目上传到码云。
- 新建两个工程,一个客户端,一个服务端,先启动服务端再启动客户端两个工程的读写操作线程类基本上完全相同服务端:import java.io.B
- stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,瞬
- //构造文件File类File f=new File(fileName);//判断是否为目录f.isDirectory();//获取目录下的
- 这篇文章主要介绍了java多线程加锁以及Condition类的使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参
- package com.tiantian.algorithms;/** * _|_1 
- 一、概述近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下效果图:恩,接下来正题。首先只有大于等于4.4版本支持这个半透明状态栏的效果,
- //哈弗曼编码的实现类public class HffmanCoding { private int c