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 文字超出屏幕之后的处理方式&#