Flutter基础

Fluter基础

Flutter环境搭建

Android Studio开发环境搭建

Flutter目录结构,入口函数以及基础组件

目录结构

文件夹 作用
android android 平台相关代码
ios ios 平台相关代码
lib flutter 相关代码，我们主要编写的代 码就在这个文件夹
test 用于存放测试代码
pubspec.yaml 配置文件，一般存放一些第三方库的依 赖。

入口函数
void main(){ runApp(MyApp()); }也可以简写 void main()=>runApp(MyApp());
其中的 main 方法是 dart 的入口方法。runApp 方法是 flutter 的入口方法。 MyApp 是自定义的一个组件

装饰组件

MaterialApp MaterialApp 是一个方便的 Widget，继承主题数据，widget需要位于MaterialApp内才能正常显示， 因此我们使用MaterialApp来运行该应用。所以MaterialApp是Flutter App开发中的界面设计入口，它封装了应用程序实现 Material Design 所需要的 一些 Widget。一般作为顶层 widget 使用。

属性 作用
home 主页
title 标题
color 颜色
theme 主题
rountes 路由

Scaffold

Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、 snackbar 和底部 sheet 的 API。

属性 作用
appBar 显示在界面顶部的一个 AppBar。
body 当前界面所显示的主要内容 Widget。
drawer 抽屉菜单控件
floatingActionButton 在右下角浮动在页面上的Widget按钮
floatingActionButtonLocation 浮动在页面上的Widget的显示位置
floatingActionButtonAnimator 创建新的浮动在页面上的Widget的动画
persistentFooterButtons 固定在下方显示的按钮，比如对话框下方的确定、取消按钮
bottomNavigationBar 底部导航栏
backgroundColor 背景颜色
resizeToAvoidBottomPadding 类似于 Android 中的 android:windowSoftInputMode=”adjustResize”，控制界面内容 body 是否重新布局来避免底部被覆盖了
resizeToAvoidBottomInset 如果为true，则body和scaffold的浮动窗口小部件应自行调整大小

Flutter状态组件

StatelessWidget 是无状态组件，状态不可变的 widgetStatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变

Flutter页面布局组件

Text

属性名称 功能
textAlign 文本对齐方式（center 居中，left 左 对齐，right 右对齐，justfy 两端对齐）
textDirection 文本方向（ltr 从左至右，rtl 从右至 左）
overflow 文字超出屏幕之后的处理方式（clip 裁剪，fade 渐隐，ellipsis 省略号）
textScaleFactor 字体显示倍率
maxLines 文字显示最大行数
style 字体的样式设置

TextStyle介绍

属性名称 功能
decoration 文字装饰线（none 没有线，lineThrough 删 除线，overline 上划线，underline 下划线）
decorationColor 文字装饰线颜色
decorationStyle 文字装饰线风格（[dashed,dotted]虚线， double 两根线，solid 一根实线，wavy 波浪 线）
letterSpacing 字母间隙（如果是负值，会让字母变得更紧 凑）
fontStyle 文字样式（italic 斜体，normal 正常体）
fontSize 文字大小
color 文字颜色
fontWeight 字体粗细（bold 粗体，normal 正常体）

Image

引入本地图片 根目录下新疆images文件夹,存放本地图片在pubspec.yaml中引用本地图片 加载网络图片

属性名称 功能
alignment 图片的对齐方式
color 和 colorBlendMode 设置图片的背景颜色，通常和 colorBlendMode 配合一起 使用，这样可以是图片颜色和背景色混合。上面的图片就 是进行了颜色的混合，绿色背景和图片红色的混合
fit fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来 的。BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 BoxFit.contain:全图显示，显示原比例，可能会有空隙。 BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要 充满整个容器，还不变形）。BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸， 可能裁切。 BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉 伸，可能裁切。 BoxFit.scaleDown：效果和 contain 差不多，但是此属 性不允许显示超过源图片大小，可小不可大。
repeat ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整 个画布。 ImageRepeat.repeatX: 横向重复，纵向不重复。 ImageRepeat.repeatY：纵向重复，横向不重复。
width 宽度 一般结合 ClipOval 才能看到效果
height 高度 一般结合 ClipOval 才能看到效果

ListView列表

属性名称 功能
scrollDirection Axis.horizontal 水平列表 Axis.vertical 垂直列表
属性名称 内边距
padding 组件反向排序
children 列表元素

GridView网格

属性名称 功能
scrollDirection 滚动方法
padding 内边距
resolve 组件反向排序
crossAxisSpacing 水平子 Widget 之间间距
mainAxisSpacing 垂直子 Widget 之间间距
crossAxisCount 一行的 Widget 数量
childAspectRatio 子 Widget 宽高比例
children 网格元素
gridDelegate 控制布局主要用在 GridView.builder 里面

Padding容器与子元素直接的间距。

属性名称 功能
padding padding 值, EdgeInsetss 设置填充的值
child 子组件

Row水平布局组件

属性名称 功能
mainAxisAlignment 主轴的排序方式
crossAxisAlignment 次轴的排序方式
children 组件子元素

Column 垂直布局组件

属性名称 功能
mainAxisAlignment 主轴的排序方式
crossAxisAlignment 次轴的排序方式
children 组件子元素

Expanded 大小占比的比例控件

属性名称 功能
flex 元素站整个父 Row /Column 的比例
child 子组件

Stack

属性名称 功能
alignment 配置所有子元素的显示位置
children 子组件

Stack Align

属性名称 功能
alignment 配置所有子元素的显示位置
children 子组件

Stack Positioned

属性名称 功能
top 子元素距离顶部的距离
bottom 子元素距离底部的距离
left 子元素距离左侧距离
right 子元素距离右侧距离
child 子组件

AspectRatio 组件:根据设置调整子元素 child 的宽高比。

属性名称 功能
aspectRatio 宽高比，最终可能不会根据这个值去布局， 具体则要看综合因素，外层是否允许按照这 种比率进行布局，这只是一个参考值
child 子组件

Flutter Card 组件:卡片组件块

属性名称 功能
margin 外边距
child 子组件
Shape Card 的阴影效果，默认的阴影效果为圆角的 长方形边。

Wrap 组件

以实现流布局，单行的 Wrap 跟 Row 表现几乎一致，单列的 Wrap 则跟 Row 表 现几乎一致。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空 间不足时，则向 crossAxis 上去扩展显示。

属性名称 功能
direction 主轴的方向，默认水平
alignment 主轴的对其方式
spacing 主轴方向上的间距
textDirection 文本方向 verticalDirection 定义了 child
verticalDirection 定义了 children 摆放顺序，默认是 down，见 Flex 相关属性介绍。
runAlignment run 的对齐方式。run 可以理解为新的行或者 列，如果是水平方向布局的话，run 可以理解 为新的一行
runSpacing run 的间距

Button组件

RaisedButton ：凸起的按钮，其实就是 Material Design 风格的 Button FlatButton ：扁平化的按钮 OutlineButton：线框按钮 IconButton ：图标按钮 ButtonBar:按钮组 FloatingActionButton:浮动按钮

属性名称 功能
onPressed 必填参数，按下按钮时触发的回调，接收一个 方法，传 null 表示按钮禁用，会显示禁用相关 样式
child 文本控件
textColor 文本颜色
color 按钮的颜色
disabledColor 按钮禁用时的颜色
disabledTextColor 按钮禁用时的文本颜色
splashColor 点击按钮时水波纹的颜色
highlightColor 点击（长按）按钮后按钮的颜色
elevation 阴影的范围，值越大阴影范围越大
padding 内边距
shape 设置按钮的形状 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), )shape: CircleBorder( side: BorderSide( color: Colors.white, ) )

BottomNavigationBar

BottomNavigationBar

BottomNavigationBar

BottomNavigationBar

BottomNavigationBar

Flutter常用表单组件的使用

TextField文本框组件

属性名称 功能
maxLines 设置此参数可以把文本框改为多行文本框
onChanged 文本框改变的时候触发的事件
decoration hintText 类似 html 中的 placeholder border 配置文本框边框 OutlineInputBorder 配合使用 labelText lable 的名称 labelStyle 配置 lable 的样式
obscureText 把文本框框改为密码框
controller controller 结合 TextEditingController()可以配置表单默认显示的内容

Checkbox单选框组件

属性名称 功能
value true 或者 false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
checkColor 选中的颜色、Checkbox 里面对号的颜色

CheckboxListTile 多选框组件

属性名称 功能
value true 或者 false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
title 标题
subtitle 二级标题
secondary 配置图标或者图片
selected 选中的时候文字颜色是否跟着改变

Radio单选按钮组件

属性名称 功能
value true 或者 false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
groupValue 选择组的值

RadioListTile多选按钮组件

属性名称 功能
value true 或者 false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
title 标题
subtitle 二级标题
secondary 配置图标或者图片
groupValue 选择组的值

开关 Switch

属性名称 功能
value true 或者 false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色

Flutter导航条,AppBar,侧边栏

AppBar 自定义顶部按钮图 标、颜色

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

TabBar

属性名称 功能
tabs 显示的标签内容，一般使用 Tab 对象,也可以是其他 的 Widget
controller TabController 对象
isScrollable 是否可滚动
indicatorColor 指示器颜色
indicatorWeight 指示器高度
indicatorPadding 底部指示器的 Padding
indicator 指示器 decoration，例如边框等
indicatorSize 指示器大小计算方式，TabBarIndicatorSize.label 跟文 字等宽,TabBarIndicatorSize.tab 跟每个 tab 等宽
labelColor 选中 label 颜色
labelStyle 选中 label 的 Style
labelPadding 每个 label 的 padding 值
unselectedLabelColor 未选中 label 颜色
unselectedLabelStyle 未选中 label 的 Style

BottomNavigationBar

是底部导航条，可以让我们定义底部 Tab 切换，bottomNavigationBar 是 Scaffold 组件的参数。

属性名称 功能
items List 底部导航 条按钮集合
iconSize icon
currentIndex 默认选中第几个
onTap 选中变化回调函数
fixedColor 选中的颜色
type BottomNavigationBarType.fixed BottomNavigationBarType.shifting

Drawer

drawer 参数可以定义左侧边栏，传入 endDrawer 可以定义右侧边 栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧 边栏

DrawerHeader

属性名称 功能
decoration 设置顶部背景颜色
child 配置子元素
padding 内边距
margin 外边距

UserAccountsDrawerHeader

属性名称 功能
decoration 设置顶部背景颜色
accountName 账户名称
accountEmail 账户邮箱
currentAccountPicture 用户头像
otherAccountsPictures 用来设置当前账户其他账户头像
margin 内边距