MaterialApp 先看下上图的具体用法:1. title:标题2. actions:表示右侧的按钮的动作3. leading:表示左侧的按钮的动作4. flexibleSpace:5. backgroundColor: Colors.red, //导航栏和状态栏的的颜色6. elevation: 10, //阴影的高度7.bottom :导航栏下面显示的widget8.brightness :状态栏的亮度9. iconTheme,左侧图表的样式12. toolbarOpacity: 0.5…

import 'package:flutter/material.dart';import 'dart:ui'; void main()=>runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); }} class HomePage extends StatefulWid…

Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感. 如上图Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏的黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?且继续看下文讲述. 在flutter项目目录下找到android主入口页面MainActivity.k…

前言 一个完整的路由页可能会包含导航栏.抽屉菜单(Drawer)以及底部Tab导航菜单等.Flutter Material组件库提供了一些现成的组件来减少开发任务.Scaffold是一个路由页的骨架,使用它可以很容易地拼装出一个完整的页面. 接口描述 AppBar是一个Material风格的导航栏,通过它可以设置导航栏标题.导航栏菜单.导航栏底部的Tab标题等. AppBar({ Key key, // 导航栏最左侧的widget,常见为抽屉菜单按钮或返回按钮.可手动来设置这一项 this.le…

import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Color…

容器类Widget 容器类Widget一般只是包装其子Widget,对其添加一些修饰(补白或背景色等).变换(旋转或剪裁等).或限制(大小等) Padding Padding可以给其子节点添加补白(填充),来看看它的定义: Padding({ ... EdgeInsetsGeometry padding, Widget child, }) EdgeInsetsGeometry是一个抽象类,开发中,我们一般都使用EdgeInsets,它是EdgeInsetsGeometry的一个子类,定义了一些设…

1. 前言 Flutter是一个由谷歌开发的开源移动应用软件开发工具包,用于为Android和iOS开发应用,同时也将是Google Fuchsia下开发应用的主要工具.其官方编程语言为Dart. 同为跨端开发的react-native的语言是JavaScript,RN是通过原生之间桥接来实现,而flutter是通过dart虚拟机直接编译. 这篇就不和 React-Native 进行详细对比 ,而是从前端开发的角度来看flutter. 2. Dart简介 Dart 比 JAVA 简单,易于理解,…

[源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) AppBar CommandBar 示例1.AppBar 的示例Controls/NavigationControl/AppBarDemo.xaml <Page x:Class="Windows10.Controls.NavigationControl.AppBarDemo" xmlns=…

一,概述 AppBar 显示在app的顶部.AppBar包含5大部分,如下图: 二,构造函数及参数含义 构造函数 AppBar({ Key key, this.leading, //在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 this.automaticallyImplyLeading = true, this.title, //Toolbar 中主要内容,通常显示为当前界面的标题文字 this.actions, //一个 Widget 列表,代表 T…

Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显示为当前界面的标题文字,可以放组 件 actions 通常使用 IconButton 来表示,可以放按钮组 bottom 通常放 tabBar,标题下面显示一个 Tab 导航栏 backgroundColor 导航背景颜色 iconTheme 图标样式 textTheme 文字样式 centerTi…

AppBar组件的常用属性如下: 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title 标题,通常显示为当前界面的标题文字,可以放组件 actions 通常使用 IconButton 来表示,可以放按钮组 bottom 通常放 tabBar,标题下面显示一个 Tab 导航栏 backgroundColor 导航背景颜色 iconTheme 图标样式 textTheme 文字样式 centerTitle 标题是否居中显示 i…

一.Flutter AppBar 自定义顶部按钮图标.颜色 leading   在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title  标题,通常显示为当前界面的标题文字,可以放组件 actions  通常使用 IconButton 来表示,可以放按钮组 bottom  通常放 tabBar,标题下面显示一个 Tab 导航栏 backgroundColor  导航背景颜色 iconTheme  图标样式 textTheme  文字样式 centerT…

在上一篇里总结AppBar的一些简单用法,但是AppBar除了有前面那些样式属性外,还能实现类似底部的Tab切换. 首先下载并运行前面的项目: 然后在此基础上实现Tab切换. 常见属性 TabBar有一下常见的属性: tabs :显示的标签内容,一般使用 Tab 对象,也可以是其他的 Widget controller :TabController 对象 isScrollable :是否可滚动 indicatorColor :指示器颜色 indicatorWeight :指示器高度 indica…

AppBar官方文档摘记 2016-6-12 本文摘自Android官方文档,为方便自己及其他开发者朋友阅读. 章节目录为"Develop > Training > Best Practices for User Interface > Adding the App Bar". Adding the App Bar App Bar是谷歌推荐的为应用带来统一外观和一致导航的UI设计元素,已有的Action Bar就是早先SDK中引入的实现.但Action Bar的引入最…

在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类App来说,Pivot更适合多个频道的展示,因为内容基本都是一样的. 到了Win10,微软模仿其他平台也推出了汉堡菜单,但并没有提供现成的控件,而是需要开发者通过一个名为SplitView的控件来实现.我个人并不觉得左上角的菜单有多么方便,汉堡菜单的使用必然会改变以前的导航模式,比如以前底部的AppBa…

本篇博文主要阐述基于Windows Runtime的Windows Phone 应用页面间导航相关知识,主要分为以下几个方面: Window.Frame和Page概览 页面间实现跳转 处理物理后退键 页面的缓存 Window.Frame和Page概览 基于WinRT的Windows Phone 8.1,每个App只有一个Window. 每个Window都有自己的Frame和导航栈, 以及自己的Page. Window中有一个Frame,并且100%撑满可视区域,通常Frame也是100%撑满Wi…

原文:重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容器控件: Border, Viewbox, Popup [源码下载] 重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容器控件: Border,…

Flutter学习资源汇总持续更新中...... Flutter官方网站 Flutter中文网 wendux的Flutter实战 Flutter官方exampleflutter_gallery 阿里巴巴咸鱼团队系列文章 阿里巴巴flutter-go,flutter 开发者帮助 APP,包含 flutter 常用 140+ 组件的demo 演示与中文文档 玩Android跨平台项目 非常有用的Json转Model插件 Flutter-Notebook,提供了很多优秀样例和Demo 前言 这是一款使…

actions → List一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示:对于不常用的菜单通常使用PopupMenuButton 来显示为三个点,点击后弹出二级菜单. automaticallyImplyLeading → bool是否提供控件占位. backgroundColor → ColorAppbar 的颜色,默认值为 ThemeData.primaryColor.该值通常和下面的三个属性一起使用:brightne…

import 'package:flutter/material.dart'; import 'News.dart'; import 'Video.dart'; import 'Chat.dart'; import 'MyId.dart'; class GuidePage extends StatefulWidget { @override State<StatefulWidget> createState() => GuidePageState(); } class GuidePage…

上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99%的情况都是不让其状态丢失,谷歌就不能默认这个选项吗?? 先看一个没有保存状态的例子: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidge…

如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后,想再看一下下头的数据,但是Flutter给你重回页面了... 这谁能顶得住啊. 看了一下解释,原来Flutter中为了节约内存不会保存widget的状态,widget都是临时变量. 不过还是有很多办法解决的,网上传言用 AutomaticKeepAliveClientMixin 配合 @overri…

先来看看制作效果: 前置知识--StatefulWidget  StatefulWidget具有可变状态(state)的窗口组件(widget).使用时要根据变化状态,调整State值, 能够快速初始化,在VSCode中直接使用快捷方式生成代码(直接在VSCode中输入stful后回车自动生成结构),如下: class name extends StatefulWidget { _nameState createState() => _nameState(); } class _nameStat…

之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微信,也是底部导航的. 既然这么常见的功能,在Flutter上面也是必不可少的啦.谷歌已经做好了Widget,下面我们就来看一下如何创建一个底部导航栏. 1. 准备工作 首先创建一个空的Flutter 项目,并且按照图示结构.创建一个pages文件夹,并新建四个page文件. 这四个pages是用到导…

AppBar 和 SliverAppBar 是纸墨设计中的 App Bar,也就是 Android 中的 Toolbar,关于 Toolbar 的设计指南请参考纸墨设计中 Toolbar 的内容. AppBar 和 SliverAppBar 都是继承至 StatefulWidget 类,都代表 Toobar,二则的区别在于 AppBar 位置的固定的应用最上面的:而 SliverAppBar 是可以跟随内容滚动的.他们的主要属性如下: leading:在标题前面显示的一个控件,在首页通常显示应用…

简介 现在我们的 APP 上面都会在屏幕下方有一排的按钮,点击不同的按钮可以进入不同的界面.就是说在界面的底部会有一排的按钮导航.可看下面的图示. 完成图示 程序工程目录 梳理下实现步骤我们需要实现这个底部菜单导航,就需要有底部菜单的那一排图标按钮.图标按钮是固定在一个工具栏 “bar” 上面.然后呢,需要分别需要有按钮对应的界面,就是说按钮有多少个,那么界面需要对应的有多少个.我们来一个清单列表: 按钮图标区域.由于展示的方式都是一样的,我们需要有一个单独的控件,循环出来就好.工具栏区域.用于…

简单演示样例看页面布局和导航 首先依照上一篇博客中的顺序来新建一个项目.新建好之后就点开MainPage.xaml開始写程序了. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="100"/> <RowDefinition Height=&qu…

技术胖Flutter第四季-19导航父子页面的跳转返回 博客地址: https://jspang.com/post/flutter4.html#toc-010 onPressed是当前按下的时候,按下动作的响应事件 Navigator是导航组件 自己写的代码没有问题.就是需要重启虚拟机 ,重新flutter run 执行以下 import 'package:flutter/material.dart'; void main(){ runApp(MaterialApp( title:'导航演示01…

21导航的参数传递和接受-2 视频地址 https://www.bilibili.com/video/av35800108/?p=22 博客地址:https://jspang.com/post/flutter4.html#toc-3d6 在onTap里面写事件: 跳转到ProductDetail页面把整个products当前的对象都传过去了. 新建ProductDetail类 使用stlss快捷键生成 再写上类名:ProductDetail 就可以了 定义product变量.在构造函数内接收 纠…

12.首页_GridView类别导航制作 首页导航区的制作 外面用一个gridview来写.里面单独提出来 新建导航组件 还是在home_page.dart里面写代码 新建一个静态的组件: 快捷键写组件的时候选择哪个stlessW的,这样把构造函数也帮你初始化好了. 定义一个内部的方法 ,返回的是一个column,内部方法名开头用下划线开头. 定义方法 _gridViewItemUI接收两个参数一个是上下文对象,一个item相当于我们每一个导航项 我们导航项点一下肯定要有页面的变化,或者是路由的…