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 是无状态组件，状态不可变的 widget
• StatefulWidget 是有状态组件，持有的状态可能在 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 内边距