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.
  @overrideWidget 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> {@overrideWidget 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

 

转载于:https://www.cnblogs.com/wangjunwei/p/10581694.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264462.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javascript保留两位

//保留两位小数 //功能&#xff1a;将浮点数四舍五入&#xff0c;取小数点后2位 function toDecimal(x) { var f parseFloat(x); if (isNaN(f)) { return; } f Math.round(x*100)/100; return f; } //制保留2位小数&#xff0c;如&#xff1…

mysql内置的变量,MySQL服务器模式及相关内置变量

本章我们主要包含两部分的内容&#xff1a;MySQL服务器模式MySQL内置变量1. MySQL服务器模式不同的MySQL客户端可以通过不同的模式操作MySQL Server。DBA可以设置一个全局模式&#xff0c;而每个应用程序可以根据需要为相应的会话设置不同的模式。MySQL操作模式会影响到SQL的语…

python模块之smtplib: 用python发送SSL/TLS安全邮件

转载请注明原文出自 http://blog.csdn.net/zhaoweikid/ python的smtplib提供了一种很方便的途径发送电子邮件。它对smtp协议进行了简单的封装。smtp协议的基本命令包括&#xff1a; HELO 向服务器标识用户身份 MAIL 初始化邮件传输 mail from: RCPT 标识单个的邮件…

B-树

6.7 B-树★4◎3 1&#xff0e;B-树的定义  B-树是一种平衡的多路查找树&#xff0c;它在文件系统中很有用。  定义&#xff1a;一棵m阶的B-树&#xff0c;或者为空树&#xff0c;或为满足下列特性的m叉树&#xff1a;  &#xff08;1&#xff09;树中每个结点至多有m棵子…

dom4j和jaxp解析工具的

dom4j解析中的几个对象node --branch --document --element --commment --attribute --text branch --document --element jaxp解析中的几个对象 node --document --element --commment --attr --text dom4j解析 中全部对象都是node对象的子节点&#xff0c;也就是说它把说有…

mysql数据库交叉连接,MySQL数据库联合查询与连接查询

联合查询基本概念联合查询是可合并多个相似的选择查询的结果集。等同于将一个表追加到另一个表&#xff0c;从而实现将两个表的查询组合在一起&#xff0c;使用为此为UNINO或UNION ALL联合查询&#xff1a;将多个查询的结果合并到一起(纵向合并)&#xff1a;字段数不变&#xf…

C#-委托和事件

要为类构造一个事件&#xff0c;必须用 event 来声明一个 delegate 型的字段&#xff0c;如&#xff1a; puclic calss Test{ public delegate EventHandler(object sender, EventArgs e); //声明为delegate 型的事件; } 然后要指定一个事件的名称&#xff0c;并写出处…

性能测试四十五:性能测试策略

1、项目具体需求,及业务场景&#xff1a;关注真实用户会是怎样的一个业务场景&#xff0c;确定用户的用户习惯。 2、指标&#xff1a;响应时间在多少以内&#xff0c;并发数多少&#xff0c;tps多少&#xff0c;总tps多少&#xff0c;稳定性交易总量多少&#xff0c;事务成功率…

原创:MD5 32位加密软件

网站后台数据库切勿使用明文保存密码&#xff0c;否则一旦黑客拿下你的Webshell&#xff0c;后果不堪设想。网站后台密码加密大多数采用的就是MD5算法加密。今天给大家送一个本人用c#简单编写的MD5 32位加密程序&#xff0c;虽然没有什么技术含量&#xff0c;但保证没有后门。 …

(教学思路 c#之类一)声明类和对象、定义类成员及其引用

上一节&#xff08;教学思路 c#之面向对象二&#xff09;初步理解面向对象的基本概念中&#xff0c;我没有提到任何的代码&#xff0c;只是用语言和实例来说明什么是类和对象以及面向对象的特性等基本概念&#xff0c;类是c#程序语言的重要核心&#xff0c;也是构建应用程序最主…

matlab数值过小为0,MATLAB数值计算——0

MATLAB数值计算MATLAB中文论坛基础板块常见问题归纳(出处: MATLAB中文论坛)登录http:www.mathworks.com/moler 获取NCM文件&#xff0c;注册账户&#xff0c;下载Toolbox格式&#xff0c;点击安装——在MATLAB中输入ncmgui出现图案即为success&#xff01;(pathtool添加默认路径…

【springboot】之自动配置原理

使用springboot开发web应用是很方便&#xff0c;只需要引入相对应的GAV就可以使用对应的功能&#xff0c;springboot默认会帮我们配置好一些常用配置。那么springboot是怎么做到的呢?这篇文章将一步步跟踪源码&#xff0c;查看springboot到底是如何帮我们做自动化配置。 sprin…

阴雨连绵潮湿加剧 车辆防潮提升保值

近日来&#xff0c;申城阴雨绵绵&#xff0c;不但增加了行车的难度&#xff0c;也使爱车潮气严重&#xff0c;开上一会就会发现前车窗布满水汽&#xff0c;需要开空调吹干才能保证良好视野。此外潮气也容易对人体和车辆本身造成影响&#xff0c;首当其冲的是车内电器&#xff0…

php nsdata,iOS开发之数据存储之NSData

1、概述使用archiveRootObject:toFile:方法可以将一个对象直接写入到一个文件中&#xff0c;但有时候可能想将多个对象写入到同一个文件中&#xff0c;那么就要使用NSData来进行归档对象。NSData可以为一些数据提供临时存储空间&#xff0c;以便随后写入文件&#xff0c;或者存…

php:兄弟连之面向对象版图形计算器1

曾经看细说PHP的时候就想做这个&#xff0c;可是一直没什么时间&#xff0c;这次总算忙里偷闲搞了代码量比較多的project。 首先&#xff0c;文档结构&#xff0c;都在一个文件夹下就好了&#xff0c;我的就例如以下。 一開始&#xff0c;进入index.php文件。 <html><…

asp.net控件开发基础(19)

上两篇讨论了基本数据绑定控件的实现步骤&#xff0c;基本上我们按着步骤来就可以做出简单的数据绑定控件了。过年前在看DataGrid的实现&#xff0c;本来想写这个的&#xff0c;但2.0出了GridView了&#xff0c;再说表格控件实现比较复杂&#xff0c;所以先放着。我们一起打开M…

Mapreduce的序列化和流量统计程序开发

一、Hadoop数据序列化的数据类型 Java数据类型 > Hadoop数据类型 int         IntWritable float        FloatWritable long        LongWritable double       DoubleWritable String       Text boolean      BooleanWr…

matlab标准化出现负值,为什么我求出来的约束条件是负值

本帖最后由 renwoxinfen 于 2016-11-8 09:01 编辑程序如下&#xff1a;a.m% 设计变量(螺杆平均直径D和长度L)的初始值x0[30;5000];% 设计变量(螺杆平均直径D长度L)的下界与上界Lb[30;5000];Ub[200;6000];% 调用多维约束优化函数% 线性不等式约束放入约束函数文件&#xff0c;参…

1048 Find Coins

水题&#xff0c;详见代码&#xff5e; #include <iostream> #include <string.h> #include <cstdio> #include <algorithm> #include <cstdlib> #include <math.h> #include <queue> #include <stack> #include <vector&g…

P2P之UDP穿透NAT的原理与实现(转)

论坛上经常有对P2P原理的讨论&#xff0c;但是讨论归讨论&#xff0c;很少有实质的东西产生&#xff08;源代码&#xff09;。呵呵&#xff0c;在这里我就用自己实现的一个源代码来说明UDP穿越NAT的原理。 首先先介绍一些基本概念&#xff1a; NAT(Network Address Transla…