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,一经查实,立即删除!

相关文章

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棵子…

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

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

原创:MD5 32位加密软件

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

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

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

【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;或者存…

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

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

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…

php组件是啥,浅谈PHP组件、框架以及Composer

本篇文章主要介绍了PHP组件、框架以及Composer&#xff0c;具有一定的学习价值&#xff0c;感兴趣的朋友可以了解一下。什么是组件组件是一组打包的代码&#xff0c;是一系列相关的类、接口和Trait&#xff0c;用于帮助我们解决PHP应用中某个具体问题。例如&#xff0c;你的PHP…

{转}maven+continuum安装与配置

为什么80%的码农都做不了架构师&#xff1f;>>> 一、下载 1. maven: 项目管理工具&#xff0c;可以进行项目的编译、测试、布置、发布等 下载路径&#xff1a;http://apache.etoak.com/maven/binaries/apache-maven-2.2.1-bin.zip 2. continuum: 基本实现的功能&…

.net Excel导出出现乱码及excel打开出现错误提示

测试人员测试发现。导出excel出现乱码以及出现文件可正常导出、后几次导出却异常。 使用的系统浏览器&#xff1a; 其他360浏览器、谷歌浏览器均正常。 出现情况如下&#xff1a; 查资料发现&#xff0c;之前导出代码编写的 Response.AppendHeader("Content-Disposition&q…

rsync推拉模型及结合inotify实现推模型自动同步

一、前言 无论使用什么操作系统下&#xff0c;都经常有同步文件的需求&#xff0c;不管发生在本地&#xff0c;还是发生在本地和远程主机之间。那么应该怎么做呢&#xff1f; 使用拷贝类的命令&#xff0c;本地使用cp命令&#xff0c;复制到远程主机使用scp这样的命令&#xff…

oracle to pgsql,PostgresToOracle

PostgresToOracle官方版是一款十分专业和实用的PostgreSQL数据库迁移到Oracle工具&#xff0c;PostgresToOracle官方版功能出色&#xff0c;操作便捷&#xff0c;能够轻松快捷的帮助大家将PostgreSQL数据导入到oracle数据中&#xff0c;导入之后可以进行数据编辑&#xff0c;此…

Struts2中的OGNL详解

2019独角兽企业重金招聘Python工程师标准>>> 首先了解下OGNL的概念&#xff1a; OGNL是Object-Graph Navigation Language的缩写&#xff0c;全称为对象图导航语言&#xff0c;是一种功能强大的表达式语言&#xff0c;它通过简单一致的语法&#xff0c;可以任意存取…

C# 之 HttpResponse 类

Response 对象&#xff0c;派生自HttpResponse 类&#xff0c;该类封装来自 ASP.NET 操作的 HTTP 响应信息。存在于System.Web命名空间下。 注&#xff1a;MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型就是设定某种扩展名的文件用一种应用程序来打开的…

11个实用的CSS学习工具

为什么80%的码农都做不了架构师&#xff1f;>>> 1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片。按向左或向右箭头键切换&#xff0c;全屏观看会有更好的效果。 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector&#xff0c;输入正确的selector来完…

Google 节日徽标全集 (1999-2009) (下)

这是 Google 节日徽标全集的第三部分&#xff0c;也是最后一部分&#xff0c;包含 Google 2006 至 2009 年 2 月全部节日徽标。需要指出的是&#xff0c;这些徽标均来自 Google 国际站点&#xff0c;也就是 www.google.com&#xff0c;Google 在众多本地站点上还有大量本土化的…

HBuilder:最快的Web开发IDE

HBuilder&#xff1a;最快的Web开发IDE http://www.csdn.net/article/2014-02-07/2818326-HBuilder-the-fastest-web-ide发表于2014-02-11 10:38| 26194次阅读| 来源CSDN| 59 条评论| 作者CSDN移动前端开发HBuilder数字天堂王安Web开发HTML5DCloud摘要&#xff1a;HBuilder是DC…