flutter FloatingActionButton组件
import 'package:flutter/material.dart';
class FloatingActionButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Widget _floatingActionButton = FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
elevation: 0.0,
backgroundColor: Colors.black87,
// shape: BeveledRectangleBorder(
// borderRadius: BorderRadius.circular(30.0)
// ),
);
final Widget _floatingActionButtonExtended = FloatingActionButton.extended(
onPressed: () {},
icon: Icon(Icons.add),
label: Text('Add'),
);
return Scaffold(
appBar: AppBar(
title: Text('FloatingActionButtonDemo'),
elevation: 0.0,
),
floatingActionButton: _floatingActionButton,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
child: Container(
height: 80.0,
),
shape: CircularNotchedRectangle(),
),
);
}
}
一个圆形图标按钮,它悬停在内容之上,以展示应用程序中的主要动作。FloatingActionButton通常用于Scaffold.floatingActionButton字段
效果:

文档:https://api.flutter.dev/flutter/material/FloatingActionButton-class.html
flutter FloatingActionButton组件的更多相关文章
- Flutter——FloatingActionButton组件(浮动按钮组件)
FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的地步凸起导航. 属性名称 属性值 child 子视图,一般为 Icon,不推荐使用文字 ...
- Flutter 父子组件传值
Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...
- flutter Container组件和Text组件
在开始之前,我们先写一个最简单的入口文件: 后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...
- Flutter InkWell - Flutter每周一组件
Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://gi ...
- Flutter ListTile - Flutter每周一组件
该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...
- Flutter常用组件(Widget)解析-Scaffold
实现一个应用基本的布局结构. 举个栗子: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); clas ...
- Flutter常用组件(Widget)解析-ListView
一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...
- Flutter常用组件(Widget)解析-Container
一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...
- Flutter BottomNavigationBar 组件
BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数. BottomNavigationBar ...
随机推荐
- Codes: MODERN ROBOTICS Ch.4_基于PoE的正运动学代码实现
%%1 基于PoE space form 的正运动学求解 % 输入M矩阵.螺旋轴列表Slist(column vector).关节角向量qlist(column vector),输出齐次变换矩阵T f ...
- 如何使用MCUXpresso IDE创建一个Cortex-M工程
拿到Cortex-M开发板之后,就可以开始使用MCUXpresso IDE上手入门.在这个教程中,我们将详细介绍如何基于CMSIS(Cortex微控制器软件接口标准)在MCUXpresso IDE中为 ...
- 十大排序代码实现(python)
目录 冒泡排序 快速排序 简单插入排序 希尔排序 简单选择排序 堆排序 二路归并排序 多路归并排序 计数排序 桶排序 基数排序 写在前面: 参考文章:十大经典排序算法 本文的逻辑顺序基于从第一篇参考博 ...
- MySQL将某个数据库下的所有表的存储引擎修改为InnoDB类型语句
如何将mysql数据库中的MyISAM类型表更改为InnoDB类型的表 改单个表 ALTER TABLE TABLENAME ENGINE=InnoDB; ALTER TABLE TABLENAME ...
- 分布式调度平台XXL-JOB源码分析-调度中心
架构图 上图是我们要进行源码分析的2.1版本的整体架构图.其分为两大块,调度中心和执行器,本文先分析调度中心,也就是xxl-job-admin这个包的代码. 关键bean 在application.p ...
- js与jquery中html() text() val()中的区别
首先html() text() val() 是jquery方法. 1.html()取得内容可以包含标签. 2.text()取得内容为元素文本内容. 3.val()只有value属性的元素才能使用该方法 ...
- windows部署tomcat
一.下载相应的JDK以及tomcat的版本 JDK:jdk-8u131-windows-x64 tomcat:apache-tomcat-8.5.23-windows-x64.zip 二.JDK的安装 ...
- IDEA设置提示生成序列化ID
背景: 实现Serializable接口的类,没有提示生成序列化ID 解决问题: 1.FIle->Settings->Editor->inspections 2.点击java-> ...
- easyui181版本使用记录
easyui181版本下载地址 简单java+easyui181版本demo下载 注意前端页面的ajax请求路径对应后端 如果再加强样式可使用adminLTE
- Bzoj 4147: [AMPPZ2014]Euclidean Nim(博弈)
4147: [AMPPZ2014]Euclidean Nim Time Limit: 1 Sec Memory Limit: 256 MB Description Euclid和Pythagoras在 ...