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