如需转载,请注明出处:Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

今天的内容是Scaffold脚手架、AppBar组件、BottomNavigationBar组件,通过这三个组件,能大体构建出一个app的主页面,顶导和底导。

  • Scaffold(脚手架组件)

Scaffold实现了基本的Material Design布局,只要是在Material Design中定义过的单个界面显示的布局控件元素,都可以使用Scaffold来绘制。

Scaffold组件属性及描述
属性名 类型 说明
appbar AppBar 显示在界面顶部的一个AppBar
body Widget 当前界面所显示的主要内容
floatingActionButton Widget 在Material Design中定义的一个功能按钮
persistentFooterButtons List<Widget> 固定在下方展示的按钮
drawer Widget 侧边栏组件
bottomNavigationBar Widget 显示在底部的导航栏按钮
backgroundColor Color 背景颜色
resizeToAvoidBottomPadding bool 控制界面内容body是否重新布局来避免底部被覆盖,比如当键盘显示时,重新布局避免键盘遮盖住内容,默认值为true

Demo示例:

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Scaffold Demo',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Scaffold Demo'),
),
body: new Center(
child: new Text('Scaffold Dmoe 脚手架组件'),
),
//底部导航按钮
bottomNavigationBar: new BottomAppBar(
child: new Container(width: ,height: ,),
),
backgroundColor: Colors.deepOrange,
),
);
}
}

效果截图:

  • AppBar(导航)

应用中的顶部导航有两种,一种AppBar一种SilveApprBar,这两种对应Android中的toolbar,AppBar和SliveApprBar都是继承自StatefulWidget,这两者的区别是AppBar是固定在应用的最上面,就是页面的最顶部,而SliveApprBar是可以跟随内容滚动的。

AppBar及SliverAppBar组件属性及描述
属性名 类型 默认值 说明
leading Widget null 在标题前面显示的一个组件,一般情况下展示按钮,比如返回按钮
title Widget null 通常显示为当前页面的标题名
actions List<Widget> null 一个Widget列表,一般情况下展示的也是按钮,比如搜索按钮等
bottom PreferredSizeWidget null 通常是TabBar,用来在ToolBar标题栏下面显示一个Tab导航栏
elevation double 4 纸墨设计中组件的z坐标顺序,对于可滚动的SliverBar,当SliverBar和内容同级的时候,该值为0,当内容滚动SliverAppBar变为toolbar的时候,修改为elevation的值
flexibleSpace Widget null 一个显示在AppBar下方的组件,高度和AppBar的高度一样,可以实现一些特殊的效果,该属性通常在SliverAppBar中使用
backgroundcolor Color ThemeData.primaryColor 背景色
brightness Brightness ThemeData.primaryColorBrightness AppBar的亮度,有白色和黑色两种主题
iconTheme IconThemeData ThemeData.primaryIconTheme AppBar上图标的颜色、透明度和尺寸信息
textTheme TextTheme ThemeData.primaryTextTheme AppBar上的文字样式
centerTitle bool true 标题显示是否居中,默认值根据不同的操作系统,显示的方式不一样

示例代码:

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowMaterialGrid: false,
debugShowCheckedModeBanner: false,
title: 'AppBar Demo',
home: new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.cyanAccent,//标题栏北京设置为浅蓝色
leading: Icon(Icons.menu),//标题左侧按钮
iconTheme: IconThemeData(color: Colors.amberAccent,opacity: ,size: ),//icon的主题,会作用到AppBar上的所有Icon(不包含IconButton,因为IconButton是个button)
title: new Text('AppBar Demo',style: TextStyle(color: Colors.deepPurple,fontSize: ),),//标题文案及字体样式设置
actions: <Widget>[
IconButton(icon: Icon(Icons.search),tooltip: '搜索', onPressed: null),//标题右侧按钮
IconButton(icon: Icon(Icons.add),tooltip: '添加', onPressed: null)//标题右侧按钮
],
),
),
);
} }

这些东西在前面的Demo都用过很多次了,就不多加说明了,看下效果截图:

  • BottomNavigationBar(底部导航条组件)

BottomNaviationBar是底部导航条,主要由按钮加文字组成,按下按钮切换不同的页面,需要一个当前的索引来控制当前具体切换的页面,可以很容易的在tab之间切换和浏览顶级试图,很多App主页底部都采用这种切换的方式。

BottomNavigationBar组件属性及描述
属性名 类型 说明
currentIndex int 当前索引,用来切换按钮控制
fixedColor Color 选中按钮的颜色,如果没有指定值,则用系统主题色
iconSize double 按钮图标大小
items List<BottomNavigationBarItem> 底部导航条按钮集,每一项是一个BottomNavigationBarItem,由icon图标及title文本属性
onTap ValueChanged<int> 按下其中某一个按钮回调事件,需要根据返回的索引设置当前索引

写一个简单的demo,底部导航放置3个选项卡,每点击一个选项卡,屏幕中间的文案随之变化,先看下代码和结果,然后讲一下代码的内容。

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'BottomNavigationBar Demo',
home: new Scaffold(
appBar: new AppBar(
title: new Text('BottomNavigationBar Demo'),
leading: Icon(Icons.menu),
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: null)
],
),
body: MyHomePage(),
),
);
}
} class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _MyHomePageState();
}
} class _MyHomePageState extends State {
var _selectedIndex = ;
var _selectedText = [
new Text('相机'),
new Text('扫码'),
new Text('闹钟'),
];
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: _selectedText.elementAt(_selectedIndex),
),
bottomNavigationBar: new BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.add_a_photo),title: new Text('相机')),
BottomNavigationBarItem(icon: Icon(Icons.center_focus_weak),title: new Text('扫码')),
BottomNavigationBarItem(icon: Icon(Icons.add_alarm),title: new Text('闹钟')),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
fixedColor: Colors.amberAccent,
),
);
} void _onItemTapped(int value) {
setState(() {
_selectedIndex = value;
});
}
}

首先要清楚的一点,有状态变化,所以要用StatefulWidget有状态组件,其次要想屏幕中间的文案和底部导航按钮要随点击事件的触发而变化,必然要有初始的索引值和文案的组件数组

  var _selectedIndex = ;
var _selectedText = [
new Text('相机'),
new Text('扫码'),
new Text('闹钟'),
];

这里的_selectedText数组里面装的是3个Text组件,每次点击底部导航的按钮,都会根据索引值将这3个Text分别放进child里面,接下来就行处理我们的bottomNavigationBar,上面的BottomNavigationBar属性表里面说过所有的选项卡都是放在items集合里面的,currentIndex处理点击后当前选项的索引值,onTap处理点击事件,fixedColor处理点击选项卡的颜色(包含按钮及文本的颜色)

bottomNavigationBar: new BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.add_a_photo),title: new Text('相机')),
BottomNavigationBarItem(icon: Icon(Icons.center_focus_weak),title: new Text('扫码')),
BottomNavigationBarItem(icon: Icon(Icons.add_alarm),title: new Text('闹钟')),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
fixedColor: Colors.amberAccent,
),

最后看一下事件的处理_onItemTapped,其实很简单,就是更新bottomNavigationBar的索引值,并且通过setState通知页面重新绘制,最终呈现出我们想要的效果。

好啦,今天就先学这么多!该睡觉啦

下一章节:Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController

Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件的更多相关文章

  1. Flutter学习笔记(21)--TextField文本框组件和Card卡片组件

    如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...

  2. Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

  3. Flutter学习笔记(18)--Drawer抽屉组件

    如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

  4. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

  5. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  6. Flutter学习笔记(12)--列表组件

    如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...

  7. Flutter学习笔记(13)--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  8. Flutter学习笔记(24)--SingleChildScrollView滚动组件

    如需转载,请注明出处:Flutter学习笔记(23)--多 在我们实际的项目开发中,经常会遇到页面UI内容过多,导致手机一屏展示不完的情况出现,以Android为例,在Android中遇到这类情况的做 ...

  9. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

随机推荐

  1. servlet的几个函数

    request.getContextPath   上下文,例如 /bignews1 (自带 “ / ”) request.getScheme() 协议,例如HTTP request.getServer ...

  2. U盘被写保护大全解

    相信大家的U盘在使用的过程中多或少都有出现过一些问题,写保护,程序写蹦而造成的逻辑错误,或者在使用过程中因电脑而中毒,内部零件损伤等等各种各样倒霉的错误. 简单了解一下是个什么东西吧.U盘写保护其实就 ...

  3. Spring Boot 2.0 迁移指南

    ![img](https://mmbiz.qpic.cn/mmbiz_jpg/1flHOHZw6Rs7yEJ6ItV43JZMS7AJWoMSZtxicnG0iaE0AvpUHI8oM7lxz1rRs ...

  4. Docker学习第一天

    1.Docker包含三个基本概念 镜像(Image) 容器(Container) 仓库(Repository) Docker镜像就是一个只读的模板,镜像可以用来创建Docker容器.Docker提供了 ...

  5. Java编程思想:文件加锁

    import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; i ...

  6. 个人永久性免费-Excel催化剂功能第101波-批量替换功能(增加正则及高性能替换能力)

    数据处理无小事,正如没有人活在真空理想环境一下,在数据分析过程中,也没有那么真空理想化的数据源可以使用,数据处理占据数据分析的80%的时间,每一个小小的改善,获益都良多.Excel查找替换,有其局限性 ...

  7. C#开发OPC Client程序

    前一段时间写了一个OPC Client程序,现在将简单介绍一下程序开发方法.测试环境最后将我写的程序开源到Github上去. 一.开发方法 我这里用的是一个OPC动态库OPCAutomation.dl ...

  8. C#编程之IList、List和ArrayList

    额...今天看了半天Ilist<T>和List<T>的区别,然后惊奇的发现使用IList<T>还是List<T>对我的项目来说没有区别...  在C#中 ...

  9. kubernetes 1.15.1 高可用部署 -- 从零开始

    这是一本书!!! 一本写我在容器生态圈的所学!!! 重点先知: 1. centos 7.6安装优化 2. k8s 1.15.1 高可用部署 3. 网络插件calico 4. dashboard 插件 ...

  10. helm安装MINIO文件服务器

    MinIO Quickstart Guide MinIO 是一个基于Apache License v2.0开源协议的对象存储服务.它兼容亚马逊S3云存储服务接口,非常适合于存储大容量非结构化的数据,例 ...