/*
一、Flutter FloatingActionButton介绍
FloatingActionButton简称FAB,可以实现浮动按钮,也可以实现类型闲鱼app的底部凸起导航。
child:子视图,一般为Icon,不推荐使用文字。
tooltip:FAB被长按时显示,也是无障碍功能
backgroundColor:背景颜色
elevation:未点击的时候的阴影
hignlightElevation:点击时阴影值,默认12.0
onPressed:点击事件回调
shape:可以定义FAB的形状等。
mini:是否是mini类型默认false
*/

Tabs.dart【设置闲鱼APP凸起按钮方法】

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart'; class Tabs extends StatefulWidget {
final index;
Tabs({Key key, this.index = }) : super(key: key);
_TabsState createState() => _TabsState(this.index);
} class _TabsState extends State<Tabs> {
int _currentIndex = ;
_TabsState(index) {
this._currentIndex = index;
}
List _pageList = [HomePage(), CategoryPage(), SettingPage()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
floatingActionButton: Container(
height: ,
width: ,
padding: EdgeInsets.all(),
margin: EdgeInsets.only(top: ),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(),
color: Colors.white
),
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
// print("floatingActionButton tabs");
setState(() {
this._currentIndex=;
});
},
backgroundColor: this._currentIndex==?Colors.red:Colors.yellow,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index) {
// print(index);
setState(() {
this._currentIndex = index;
});
},
iconSize: 36.0,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text('分类')),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: Text('设置')),
]),
body: this._pageList[this._currentIndex],
drawer: Drawer(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
// Expanded(
// child: DrawerHeader(
// child: Text('你好Flutter'),
// decoration: BoxDecoration(
// // color: Colors.yellow
// image: DecorationImage(
// image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
// fit:BoxFit.cover
// ),
// ),
// )
// ) Expanded(
child: UserAccountsDrawerHeader(
accountName: Text('老师你好'),
accountEmail: Text('gztt@163.com'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
'https://www.itying.com/images/flutter/3.png'),
),
decoration: BoxDecoration(
// color: Colors.yellow
image: DecorationImage(
image: NetworkImage(
'https://www.itying.com/images/flutter/2.png'),
fit: BoxFit.cover),
),
otherAccountsPictures: <Widget>[
Image.network(
'https://www.itying.com/images/flutter/5.png'),
Image.network(
'https://www.itying.com/images/flutter/4.png')
],
),
)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text('我的空间')),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text('用户中心'),
onTap: () {
Navigator.of(context).pop();
Navigator.pushNamed(context, '/user');
}),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text('用户中心'),
)
],
),
),
endDrawer: Drawer(
child: Text('右侧侧边栏'),
),
);
}
}

Button.dart

import 'package:flutter/material.dart';

class ButtonDemoPage extends StatelessWidget {
const ButtonDemoPage({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('按钮演示页面'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
)
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add,color: Colors.black,size: ),
onPressed: (){
print("floatingActionButton");
},
backgroundColor: Colors.yellow, ),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
RaisedButton(
child: Text('普通'),
onPressed: () {
print('普通按钮');
},
),
SizedBox(width: ),
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text('图标'),
onPressed: null,
),
SizedBox(width: ),
RaisedButton(
child: Text('有颜色'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print('有颜色按钮');
},
),
SizedBox(width: ),
RaisedButton(
child: Text('有阴影'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {
print('有阴影按钮');
}),
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: ,
width: ,
child: RaisedButton(
child: Text('宽度高度'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {},
),
)
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: ,
margin: EdgeInsets.all(),
child: RaisedButton(
child: Text('自适应按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {
print('自适应按钮');
},
),
))
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('圆角按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular()),
onPressed: () {
print('圆角按钮');
},
),
RaisedButton(
child: Text('圆形按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
splashColor: Colors.grey,
shape: CircleBorder(side: BorderSide(color: Colors.white)),
onPressed: () {
print('圆形按钮');
},
)
],
),
FlatButton(
//扁平化按钮:
child: Text('扁平化的按钮'),
color: Colors.blue,
textColor: Colors.yellow,
onPressed: () {},
),
OutlineButton(
child: Text('线框按钮'),
onPressed: () {
print('OutlineButton');
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.all(),
height: ,
child: OutlineButton(
child: Text('注册'),
onPressed: () {},
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
//按钮组
children: <Widget>[
RaisedButton(
child: Text('登录'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
RaisedButton(
child: Text('注册'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
],
)
],
),
MyButton(
text: "自定义按钮",
height: 60.0,
width: 100.0,
pressed: () {
print("自定义按钮");
},
) ],
));
}
} //自定义按钮组件:
class MyButton extends StatelessWidget {
final text;
final pressed;
final double width;
final double height;
const MyButton(
{this.text = '', this.pressed = null, this.width = , this.height = });
@override
Widget build(BuildContext context) {
return Container(
height: this.height,
width: this.width,
child: RaisedButton(
child: Text(this.text),
onPressed: this.pressed,
),
);
}
}

23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮:的更多相关文章

  1. FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮

    一.Flutter FloatingActionButton 介绍 FloatingActionButton 简称 FAB,可以实现浮动按钮,也可以实现类似闲鱼 app 的地步凸起导航   child ...

  2. 自己动手制作的淘宝闲鱼APP宝贝数据采集工具软件

    之前做过淘宝PC端宝贝和店铺数据的采集,后来需要做APP端的数据采集,因为没有学过Android,以前也都是做PC端的软件,有没有其他方法呢? 突然想到了用手机模拟器,可以在电脑端控制运行手机APP端 ...

  3. OnSen UI结合AngularJs打造”美团"APP底部导航栏 --Hybrid App

    1.页面效果图:(点击底部导航按钮,可切换到不同的页面) 演示地址:http://www.nxl123.cn/bokeyuan/2018080301/meiTuanDemo/ 2.项目目录结构 3.核 ...

  4. react native 使用TabNavigator编写APP底部导航

    第一步,下载依赖 npm install react-native-tab-navigator --save 第二步,引入 import TabNavigator from 'react-native ...

  5. GMTC2019|闲鱼-基于Flutter的架构演进与创新

    2012年应届毕业加入阿里巴巴,主导了闲鱼基于Flutter的新混合架构,同时推进了Flutter在闲鱼各业务线的落地.未来将持续关注终端技术的演变及趋势 Flutter的优势与挑战 Flutter是 ...

  6. Flutter 底部导航栏bottomNavigationBar

    实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...

  7. Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果

    在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...

  8. Flutter——BottomNavigationBar组件(底部导航栏组件)

    BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...

  9. 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化

    效果: /**  * Flutter  BottomNavigationBar 自定义底部导航条.以及实现页面切换:  * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...

随机推荐

  1. charles overvoew

    本文参考:charles overvoew 这里是请求文件的概览 对HTTP/s分析非常重要 基本上常见的HTTP相关字段都有: Charles is a web proxy (HTTP Proxy ...

  2. charles 主界面总结

    本文参考:charles 主界面总结 charles 主界面的介绍 Charles 主要提供两种查看封包的视图,分别名为 Structure Structure/结构视图,将网络请求按访问的域名分类, ...

  3. Redis4.0之持久化存储

    一,redis概述与实验环境说明 1.1 什么是redis redis是一种内存型的NoSQL数据库,优点是快,常用来做缓存用  redis存储数据的方法是以key-value的形式  value类型 ...

  4. PAT基础级-钻石段位样卷2-7-6 帅到没朋友 (20 分)

    当芸芸众生忙着在朋友圈中发照片的时候,总有一些人因为太帅而没有朋友.本题就要求你找出那些帅到没有朋友的人. 输入格式: 输入第一行给出一个正整数N(≤),是已知朋友圈的个数:随后N行,每行首先给出一个 ...

  5. 三维视觉、SLAM方向全球顶尖实验室汇总

    本文作者 任旭倩,公众号:计算机视觉life,编辑成员 欧洲 英国伦敦大学帝国理工学院 Dyson 机器人实验室 http://www.imperial.ac.uk/dyson-robotics-la ...

  6. Find The Multiple (DFS递归)

    题意:输入一个不超过200的数 n,然后求得一个数字k,数字满足:能被n整除,每一位只有0,1.这样的数字k会有很多个,然以输出一个就可以. 注意unsigned __int64的范围,-(10^19 ...

  7. unable to access 'https://github.com/shixianqing/img.git/': SSL connect error 解决办法

    解决在linux环境下,git clone 项目,走https协议时,报SSL connect error 错误 升级nss yum update -y nss curl libcurl

  8. 【Java】debug初级使用(Eclipse)

    1.设置.取消断点 双击要设置断点的代码行数字的前面 2.切换成Debug界面 就会发现画面变成了下图这样 以下是调试的界面解说(图源百度) 3.切换为原界面

  9. BZOJ1257: [CQOI2007]余数之和——整除分块

    题意 求 $\sum _{i=1}^n k \ mod \ i$($1\leq n,k\leq 10^9$). 分析 数据范围这么大 $O(n)$ 的复杂度也挺不住啊 根据取模的意义,$k \ mod ...

  10. 怎样运行jar包中的文件

    1. 2.编辑sysmodule.cmd文件 java -cp sysmodule.jar;classes12.jar;mysql-connector-java-5.0.3-bin.jar;jbcl. ...