Flutter学习记录(二)

Flutter常用的布局组件

Flutter学习记录(二)_第1张图片

StatelessWidget和StatefulWidget的差别:是否要管理控件的状态。Flutter控件主要分为两大类,StatelessWidget和StatefulWidget,StatelessWidget用来展示静态的文本或者图片,如果控件需要根据外部数据或者用户操作来改变的话,就需要使用StatefulWidget。一个控件的主要任务是实现build函数,定义控件中其他较低层次的控件。build函数将依次构建这些控件,直到底层渲染对象。

基本组件

Container:容器

Row:flex水平布局控件

Column:flex垂直布局控件

Image:显示图像的控件,Image控件有多种构造函数:

  • new Image,用于从ImageProvider获取图像。

  • new Image.asset,用于使用key从AssetBundle获取图像。

  • new Image.network,用于从URL地址获取图像。

  • new Image.file,用于从File获取图像。

在pubspec.yaml这个文件里指定本地图片路径

# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg

Text:用来显示文本的控件

Icon:图标控件,不可交互,必须在 Directionality控件里使用

RaisedButton:避免在dialog和card控件里使用,一般弹出式的控件建议使用扁平化按钮,减少布局层次叠加。

Scaffold:主要属性如下

  • appBar:显示在界面顶部的一个 AppBar,也就是 Android 中的 ActionBar 、Toolbar

  • body:当前界面所显示的主要内容 Widget

  • floatingActionButton:Material设计中所定义的 FAB,界面的主要功能按钮

  • persistentFooterButtons:固定在下方显示的按钮,比如对话框下方的确定、取消按钮

  • drawer:侧边栏控件

  • backgroundColor: 内容的背景颜色,默认使用的是 ThemeData.scaffoldBackgroundColor 的值

  • bottomNavigationBar: 显示在页面底部的导航栏

  • resizeToAvoidBottomPadding:类似于 Android 中的 android:windowSoftInputMode=”adjustResize”,控制界面内容 body 是否重新布局来避免底部被覆盖了,比如当键盘显示的时候,重新布局避免被键盘盖住内容。默认值为 true。

  • Flutter学习记录(二)_第2张图片

你可能感兴趣的:(Flutter)