Flutter——FloatingActionButton组件(浮动按钮组件)
属性名称 | 属性值 |
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组件(浮动按钮组件)的更多相关文章
- Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏
FloatingActionButton 简称 FAB,从字面理解可以看出,它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙,只是我们没有正式的接触. 一般来说,它是一个圆形, ...
- Flutter中的浮动按钮 FloatingActionButton
FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 . 常用属性 FloatingActionButton的常用属性,同flutte ...
- "浮动按钮"组件:<fab> —— 快应用组件库H-UI
    <import name="fab" src="../Common/ui/h-ui/basic/c_fab"></import ...
- Flutter学习笔记(11)--文本组件、图标及按钮组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...
- Flutter 中的常见的按钮组件 以及自定义按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...
- flutter中的按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...
- 【Flutter学习】基本组件之基本按钮组件
一,概述 由于Flutter是跨平台的,所以有适用于Android和iOS的两种风格的组件.一套是Google极力推崇的Material,一套是iOS的Cupertino风格的组件.无论哪种风格,都是 ...
- Flutter 中的常见的按钮组件 以及自 定义按钮组件
一.Flutter 中的按钮组件介绍 Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.Outlin ...
- Flutter中的按钮组件介绍
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...
随机推荐
- Elasticsearch集成Hadoop最佳实践.pdf(内含目录)
Elasticsearch服务器开发(第2版) 介绍: ElasticSearch是一个开源的分布式搜索引擎,具有高可靠性,支持非常多的企业级搜索用例.ElasticsearchHadoop作为一个完 ...
- .gitignore 模板
.gitignore 模板 HELP.md target/ !.mvn/wrapper/maven-wrapper.jar !**/src/main/** !**/src/test/** ### ST ...
- Vue学习笔记十一:按键修饰符和自定义指令(钩子函数)
目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...
- pca数学原理(转)
PCA的数学原理 前言 数据的向量表示及降维问题 向量的表示及基变换 内积与投影 基 基变换的矩阵表示 协方差矩阵及优化目标 方差 协方差 协方差矩阵 协方差矩阵对角化 算法及实例 PCA算法 实例 ...
- Apache POI操作pptx基本使用
最近有一个ppt操作的需求,因此查了下相关的资料 ppt分类 (1)2007版之前的 是基于二进制的文件格式 细节没有完全公开,第三方厂商多是用单向工程方法猜测和分析出来的.WPS做得好一些,但开源的 ...
- Sap MM 定义物料号码范围
Sap里面的物料编号可以设置内部给号或者外部给号,外部的意思就是通过手动输入,内部就是系统自动根据号码段分配. 物料号是根据物料类型定义范围的. 笔记 作者:明光烁亮 出处:http://www.cn ...
- 任务调度之Quartz.Net基础
最近公司要求将之前的系统设计文档补上,于是大家就都被分配了不同的任务,紧锣密鼓的写起了文档来.发现之前项目中使用了Quartz.Net来做一些定时任务的调度,比如定时的删除未支付的订单,定时检查支付状 ...
- Linux 环境变量设置的几种方法
From:http://home.eeworld.com.cn/home.php?mod=space&uid=291513&do=blog&id=40557 环境变量是和She ...
- 原生js 实现better-scroll效果,饿了么菜单内容联动,即粘即用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- C#中HttpWebRequest、WebClient、HttpClient的使用
HttpWebRequest: 命名空间: System.Net,这是.NET创建者最初开发用于使用HTTP请求的标准类.使用HttpWebRequest可以让开发者控制请求/响应流程的各个方面,如 ...