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

FloatingActionButton实现闲鱼APP底部凸起按钮:

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: "FloatingActionButton",
home: MyApp(),
));
} class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
} class _MyAppState extends State<MyApp> {
int _currentIndex = 0;
List _pageList = [
Page("闲鱼页面"),
Page("鱼塘页面"),
Page("发布页面"),
Page("消息"),
Page("我的")
]; @override
Widget build(BuildContext context) {
return Scaffold(
body: _pageList[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.yellow,
onTap: (int index) {
setState(() {
this._currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("闲鱼", style: TextStyle(color: Colors.black54))),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("鱼塘", style: TextStyle(color: Colors.black54))),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("发布", style: TextStyle(color: Colors.black54))),
BottomNavigationBarItem(
icon: Icon(Icons.message),
title: Text("消息", style: TextStyle(color: Colors.black54))),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("我的", style: TextStyle(color: Colors.black54))),
],
),
floatingActionButton: Container(
margin: EdgeInsets.only(top: 5),
child: FloatingActionButton(
child: Icon(Icons.add, color: Colors.black54),
backgroundColor: Colors.yellow,
onPressed: () {
setState(() {
this._currentIndex = 2;
});
},
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
} class Page extends StatelessWidget {
String text; Page(this.text); @override
Widget build(BuildContext context) {
return Center(
child: Text(text),
);
}
}

Flutter——FloatingActionButton组件(浮动按钮组件)的更多相关文章

  1. Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏

    FloatingActionButton 简称 FAB,从字面理解可以看出,它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙,只是我们没有正式的接触. 一般来说,它是一个圆形, ...

  2. Flutter中的浮动按钮 FloatingActionButton

    FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 . 常用属性 FloatingActionButton的常用属性,同flutte ...

  3. "浮动按钮"组件:<fab> —— 快应用组件库H-UI

        <import name="fab" src="../Common/ui/h-ui/basic/c_fab"></import ...

  4. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  5. Flutter 中的常见的按钮组件 以及自定义按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...

  6. flutter中的按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...

  7. 【Flutter学习】基本组件之基本按钮组件

    一,概述 由于Flutter是跨平台的,所以有适用于Android和iOS的两种风格的组件.一套是Google极力推崇的Material,一套是iOS的Cupertino风格的组件.无论哪种风格,都是 ...

  8. Flutter 中的常见的按钮组件 以及自 定义按钮组件

    一.Flutter 中的按钮组件介绍   Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.   IconButton.Outlin ...

  9. Flutter中的按钮组件介绍

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...

随机推荐

  1. Elasticsearch集成Hadoop最佳实践.pdf(内含目录)

    Elasticsearch服务器开发(第2版) 介绍: ElasticSearch是一个开源的分布式搜索引擎,具有高可靠性,支持非常多的企业级搜索用例.ElasticsearchHadoop作为一个完 ...

  2. .gitignore 模板

    .gitignore 模板 HELP.md target/ !.mvn/wrapper/maven-wrapper.jar !**/src/main/** !**/src/test/** ### ST ...

  3. Vue学习笔记十一:按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

  4. pca数学原理(转)

    PCA的数学原理 前言 数据的向量表示及降维问题 向量的表示及基变换 内积与投影 基 基变换的矩阵表示 协方差矩阵及优化目标 方差 协方差 协方差矩阵 协方差矩阵对角化 算法及实例 PCA算法 实例 ...

  5. Apache POI操作pptx基本使用

    最近有一个ppt操作的需求,因此查了下相关的资料 ppt分类 (1)2007版之前的 是基于二进制的文件格式 细节没有完全公开,第三方厂商多是用单向工程方法猜测和分析出来的.WPS做得好一些,但开源的 ...

  6. Sap MM 定义物料号码范围

    Sap里面的物料编号可以设置内部给号或者外部给号,外部的意思就是通过手动输入,内部就是系统自动根据号码段分配. 物料号是根据物料类型定义范围的. 笔记 作者:明光烁亮 出处:http://www.cn ...

  7. 任务调度之Quartz.Net基础

    最近公司要求将之前的系统设计文档补上,于是大家就都被分配了不同的任务,紧锣密鼓的写起了文档来.发现之前项目中使用了Quartz.Net来做一些定时任务的调度,比如定时的删除未支付的订单,定时检查支付状 ...

  8. Linux 环境变量设置的几种方法

    From:http://home.eeworld.com.cn/home.php?mod=space&uid=291513&do=blog&id=40557 环境变量是和She ...

  9. 原生js 实现better-scroll效果,饿了么菜单内容联动,即粘即用

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. C#中HttpWebRequest、WebClient、HttpClient的使用

    HttpWebRequest: 命名空间: System.Net,这是.NET创建者最初开发用于使用HTTP请求的标准类.使用HttpWebRequest可以让开发者控制请求/响应流程的各个方面,如  ...