Flutter 常用组件

时间:2023-12-09 23:48:55

无状态组件(StatelessWidget)是不可变的,这意味着它的属性不能改变,所有的值都是最终的。

有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化。实现一个StatefulWidget至少需要两个类:一个StatefulWidget类,一个State类。StatefulWidget类本身是不变的,但是State类在Widget生命周期中始终存在。

一.容器组件Container:包含一个子Widget,自身具备如alignment、padding等基础属性,方便布局过程中摆放child。

二.图片组件Image:是显示图像的组件,Image组件有多种构造函数:

 new Image: 从ImageProvider获取图像
   new Image.asset: 加载资源图片
   new Image.file: 加载本地图片文件
   new Image.network: 加载网络图片
     new Image.memory: 加载Uint8List资源图片

三.文本组件text:负责显示文本和定义显示样式。

四.图标及按钮组件

1.图标组件Icon:为展示图标的组件,该组件不可交互,要实现可交互的图标,可以考虑使用IconButton组件。组件相关的组件有以下几个:

  IconButton: 可交互的Icon
  Icons: 框架自带Icon集合
  IconTheme: Icon主题
  ImageIcon: 通过AssetImages或者其他图片显示Icon

2.图标按钮组件IconButton:是基于Material Design风格的组件,它可以响应按下事件,并且按下时会带一个水波纹的效果。

 如果它的onPressed回调函数为null,那么这个按钮处于禁用状态,并且不可以按下。

3.凸起按钮组件RaisedButton:是Material Design中的Button,一个凸起的材质矩形按钮,它可以响应按下事件,并且按下时会带一个触摸的效果。

五.列表组件:

1.基础列表组件: ListView组件
2.水平列表组件: 把ListView组件的scrollDirection属性设置为Axis.horizontal即可
3.长列表组件: 使用ListView组件为基础,还需要添加一个列表项构造器itemBuilder。
4.网络列表组件: GridView组件,可以实现多行多列的应用场景。

六.表单组件

表单是一个包含表单元素的区域。表单元素允许用户输入内容,比如:文本域、下拉列表、单选框、复选框等。

表单里有两个重要的组件,一个是Form组件用来做整个表单提交使用的,另一个是TextFormField组件,用来做用户输入的。

七.Material Design风格组件:

1.App结构和导航组件:

MaterialApp 应用组件
Scaffold 脚手架组件
AppBar 应用按钮组件
BottomNavigationBar 底部导航条组件
TabBar 水平选项卡及视图组件
Drawer 抽屉组件

2.按钮和提示组件.

FloatingActionButton 悬停按钮组件
FlatButton 扁平按钮组件
PopupMenuButton 弹出菜单组件
SimpleDialog 简单对话框组件
AlertDialog 提示对话框组件
SnackBar 轻量提示组件

3.其他组件

TextField 文本框组件
Card 卡片组件

八.Cupertino风格组件:

1.CupertinoActivityIndicator组件
2.CupertinoAlertDialog对话框组件
3.CupertinoButton按钮组件
4.Cupertino导航组件集