20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1
第03节: 不规则底部工具栏制作-1
博客地址:
https://jspang.com/post/flutterDemo.html#toc-973
视频地址:
https://www.bilibili.com/video/av39709290?p=3
视频里面的评论:动态组件就是可以setState的组件
flutter create demo02的项目
这里是定义主题的地方:自定义主题使用theme然后里面使用:primarySwatch,后面主要跟的就是我们的颜色
引入:bottom_appBar_demo.dart
然后我们去创建这个自定义的组件bottom_appBar_demo.dart
创建我们的动态组件:stateFulW快捷键
文件起好名字:BottomAppBarDemo
今天主要学的就是这个:floatingActionButton,字面意思 可交互的浮动的按钮。在Scaffold里面已经有它的位置了。所以后面我们直接吧FloatingActionButton组件引用过来就可以了。
ToolTip不影响整个页面的布局,只有长按的时候才会显示。为什么要加tooltip。因为我们这个FAB组件经常里面就放一个icon图标。
child里面一般都是放ICON组件。这样这个动态组件我们就写完了。
查看效果
鼠标长按会出tooltip
再加上app底部的工具栏
这次这里我们使用BottomAppBar()底部工具栏。这个底部工具栏有什么好处呢。它比NavigatorBar要灵活。
shape的作用因为要和FAB融合 融合的时候要有一个缺口。缺口的设置就在shape里面设置。
查看效果
但是现在还没有融合到一起:这里我们需要设置这个属性:floatingActionButtonLocation
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
最终效果
代码
import 'package:flutter/material.dart';
import 'bottom_appBar_demo.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.lightBlue,//里面定义了很多的主题,这里使用亮蓝色
),
home:BottomAppBarDemo()
);
}
}
main.dart
import 'package:flutter/material.dart'; class BottomAppBarDemo extends StatefulWidget {
final Widget child; BottomAppBarDemo({Key key, this.child}) : super(key: key); _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
} class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){ },
tooltip: 'WJW',
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.lightBlue,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
color: Colors.white,
onPressed: (){},
),
IconButton(
icon: Icon(Icons.alarm_on),
color: Colors.white,
onPressed: (){},
)
],
),
),
);
}
}
bottom_appBar_demo.dart
20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1的更多相关文章
- 20个Flutter实例视频教程-第04节: 不规则底部工具栏制作-2
视频地址: https://www.bilibili.com/video/av39709290/?p=4 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1
20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...
- 20个Flutter实例视频教程-第13节: 展开闭合案例
20个Flutter实例视频教程-第13节: 展开闭合案例 视频地址: https://www.bilibili.com/video/av39709290/?p=13 博客地址: https://js ...
- 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1
视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第02节: 底部导航栏制作-2
视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...
- 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2
博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...
- 20个Flutter实例视频教程-第07节: 毛玻璃效果制作
视频地址: https://www.bilibili.com/video/av39709290/?p=7 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第08节: 保持页面状态
博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av397092 ...
- 20个Flutter实例视频教程-第09节: 保持页面状态-2
视频地址:https://www.bilibili.com/video/av39709290/?p=9 博客地址:https://jspang.com/post/flutterDemo.html#to ...
随机推荐
- Android 设计模式之单例模式
设计模式是前人在开发过程中总结的一些经验,我们在开发过程中依据实际的情况,套用合适的设计模式,能够使程序结构更加简单.利于程序的扩展和维护.但也不是没有使用设计模式的程序就不好.如简单的程序就不用了, ...
- px rem css 转换工具
http://520ued.com/tools/rem mark 一下 貌似还挺好用
- Scrapy爬虫入门系列2 示例教程
本来想爬下http://www.alexa.com/topsites/countries/CN 总排名的,但是收费了 只爬了50条数据: response.xpath('//div[@class=&q ...
- 多媒体开发之编码gop---什么是GOP
所谓GOP,意思是画面组,MPEG格中的帧序列,分为I.P.B三种,如排成IBBPBBPBBPBBPBBP...样式,这种连续的帧图片组合即为GOP(画面群,GROUP OF PICTURE),是MP ...
- 初步探讨WPF的ListView控件(涉及模板、查找子控件) - GavinJun
本文结合模板的应用初步介绍ListView的应用 一.Xaml中如何建立数据资源 大部分数据都会来自于后台代码,如何Xaml同样的建立数据源呢?比如建立一个学生List: 首先引入命名空间: xmln ...
- [深入浅出Cocoa]iOS程序性能优化
本文转载至 http://blog.csdn.net/kesalin/article/details/8762032 [深入浅出Cocoa]iOS程序性能优化 罗朝辉 (http://blog.csd ...
- lateral inhibition
http://www.indiana.edu/~p1013447/dictionary/lat_i.htm [This means that neighboring visual neurons re ...
- ZOJ - 3948 Marjar Cola 【循环】
题目链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3948 题意 用 x 个 瓶身 可以 换 一瓶饮料 用 y 个 瓶 ...
- poj3295 Tautology —— 构造法
题目链接:http://poj.org/problem?id=3295 题意: 输入由p.q.r.s.t.K.A.N.C.E共10个字母组成的逻辑表达式, 其中p.q.r.s.t的值为1(true)或 ...
- 2017广东工业大学程序设计竞赛 E倒水(Water)
题目链接:http://www.gdutcode.sinaapp.com/problem.php?cid=1057&pid=4 题解: 方法一:对n取2的对数: 取对数的公式:s = log( ...