Flutter基础组件（一）

2023-03-28  本文已影响0人  seph_von

Flutter官方提供的UI组件有非常多，摘取常用的UI组件记录下常见的属性和用法。

基础组件

组件类别 组件名称 描述 常见属性
文本 Text 文本组件，展示文字内容 textAlign：文字对其方式;
maxLine：最多显示行数;
overflow：文字截断方式;
textScaleFactor：文字放大系数;
style：文字样式包括大小，颜色，背景，字体，装饰等;
textSpan: 同一Text不同部分文字效果
按钮 ElevatedButton
TextButton
OutlineButton
IconButton
 悬浮按钮，有阴影;
文字按钮，没有阴影和背景;
边框按钮;
图标按钮		 icon：接收一个Icon组件，展示图标;
label：接收一个Text组件展示文字（IconButton除外）
onPress: 接收一个点击事件处理器
图形 Image
Icon		 展示图片，可以从assert目录，本地文件或者网络上加载图片
图标，可以加载iconfont		 image: 设置显示图片的提供者;
width/height：设置图片的宽高;
fit：缩放模式;
repeat：重复模式;
aligne：对齐模式;
icon>color: icon的颜色
选择框 Switch
Checkbox		 单选开关
复选框，可以有三种状态：null false true		 value：当前的值;
activeColor：选中状态的颜色;
onChanged：选择状态发生变化时的回调
输入 TextField
Form		 文本输入框
表单，可分组校验和操作		 controller：编辑框控制器，获取内容以及相应操作;
focusNode：控制焦点;
keyboardType：键盘类型;
InputDeraction：输入样式文本背景颜色提示等;
form>autovalidate: 自动检验输入内容的合法性，一有错误即刻提出，否则需要调用formState.validate校验;
form>onWillPop：拦截返回事件;
form>onChange：每个子项发生变化时回调
指示器 LinerProgressIndicator
CircleProgressIndicator		 条状的进度指示器
圆形的进度指示器		 value: 当前进度，不赋值时表示模糊进度;
backgroundColor：背景颜色;
activeColor：已完成颜色（动画）circleProgressIndicator>strokeWidth: 圆环的粗细

布局类组件

Flutter中组件类型大致为

Widget 描述 用途
LeafRenderObjectWidget 叶子节点的组件类型，没有子组件 通常用来实现基础组件
SingleChildRenderObjectWidget 包含单个子组件的组件类型 通常用来实现包含单个子组件的组件
MultiChildRenderObjectWidget 包含多个子组件的组件类型 通常用来实现包含多个子组件的组件

布局类组件都是直接或者间接继承了 SingleChildRenderObjectWidget 或者 MultiChildRenderObjectWidget;

组件类型 组件名称 描述
约束布局 ConstrainedBox 给子组件增加约束，如minWidth，maxWidth，minHeight，maxHeight等
约束布局 SizedBox 给子组件一个固定大小的约束
约束布局 unConstrainedBox 去除父组件的约束，由子组件自己决定大小
线性布局 Row 水平方向布局，主轴为水平方向，纵轴为竖直方向 MainAxisAlignment表示主轴对齐方式，CrossAxisAlignment表示纵轴对齐方式
线性布局 Column 垂直防线布局，主轴为竖直方向，纵轴为水平方向
弹性布局 Flex 允许子组件按照一定比例来分配空间，结合Expand组件使用
弹性布局 Expand 通过flex属性来分配空间占比;Expand组件只能使用在Flex（Row，Column继承自Flex组件）组件内
流式布局 Wrap 可以自动折行，direction方向，spacing，runspacing表示主纵轴间距，runAlignment 纵轴对齐方式
流式布局 Flow 用于自定义流式布局，需要自己实现FlowDelegate，指定大小，但性能好，灵活
层叠布局 Stack 堆叠布局，类似Android中的FramLayout
层叠布局 Positioned 与Stack配合使用，相对Stack的四点的位置布局
相对定位 Align 相对位置的布局，有两种实现 Alignment 和 FractionalOffset，区别在于原点位置不同
相对定位 Center 居中对齐，如果不设置widthFactor和heightFactor，那么会撑满父组件
信息组件 LayoutBuilder 获取父组件的约束条件，从而动态部署子组件

装饰类组件

这类组件通常是用来给子组件增加样式，间距，裁剪，旋转等功能

组件名称 描述 常用属性
Padding 给子组件增加留白（间距） padding：设置四边间距
DecorationBox 装饰性组件，可在组件绘制前后增加装饰，如背景，形状，阴影等 decoration：装饰类
position: 前景还是背景
Transform 变换组件，可变换子组件的位置，旋转，大小;不影响布局只在绘制阶段生效 transform：变换矩阵
Transform.translate:位移组件
Transform.scale：缩放组件
Transform.rotate: 旋转组件
RotatedBox 旋转组件，会变换子组件的位置和大小，在布局阶段生效 quarterTurns：旋转角度（90度倍数）
Container 容器组件，包含其他各个装饰组件功能，如padding，decoration，transform等 margin：容器外间距，不属于decoration的修饰范围
constraint:容器的大小限制
fogroundDecoration:前景修饰，与背景修饰分开了
ClipOval 子组件为正方形时剪裁成内贴圆形;为矩形时，剪裁成内贴椭圆
ClipRRect 将子组件剪裁为圆角矩形 borderRadius:圆角半径
ClipRect 默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁） clipper：自定义的裁剪器
ClipPath 按照自定义的路径剪裁 clipper：自定义裁剪器
FittedBox 自适应布局，去除父组件约束，根据子组件大小和适应参数绘制 fit：适配方式
aligment:对齐方式
clipBehavor: 裁剪方式
Scaffold 页面骨架，包含appbar，bottomNavigationBar，drawer，floatActionButton等 appBar：标题栏;
bottomNavigationBar:底部导航栏;
drawer: 抽屉菜单;
floatActionButton:悬浮按钮

可滚动组件

Flutter 中的可滚动组件主要由三个角色组成：Scrollable、Viewport 和 Sliver：

可滚动组件的通用配置：

组件名称 描述 常用属性
SingleChildScrollView 可滚动组件，只有一个子组件，不会按需加载，用于组件内容不是很多的情况下。 primary：表示是否使用widget树中的默认的primaryScrollController
ListView 沿一个方向上线性布局的可滚动组件 itemExtent：子组件的高度或宽度，可提高性能
protoTypeItem: 子组件原型，不知道itemExtent的情况下使用
ListView.Builder: 列表项构造器，列表子组件比较多时使用
ListView.Separated: 可在列表项中添加分割线
ScrollController 滚动组件控制器，可以获取当前滚动位置，控制滚动等，组件dispose时需要调用dispose防止内存泄漏 offset：当前滚动位置;
jumpTo：跳转到指定的位置;
animateTo：执行一个动画效果到指定位置
addListener: 添加一个滚动监听
NotificationListener 监听滚动组件的滚动事件;可以在滚动组件与根组件之间任意位置 pixels：当前滚动长度;
maxScrollExtent：最大可滚动长度;
extentBefore：已滚动长度;
extentInset：视窗内长度;
extentAfter：还可以滚动的长度;
atEdge：是否到滚动边界
AnimatedList 与ListView相似，当时在添加和移除列表项时，会执行动画效果 State.insertItem: 应用插入时执行动画;
State.removeItem：应用删除时执行动画
GridView 网格布局 gridDelegate：控制网格如何布局
PageView 页面切换布局，可配合Tab使用 allowImplicitScrolling：是否允许缓存页面（前后各一页）
TabBarView 页面切换组件，封装了PageView tabController：用于监听和控制TabBarView的页面切换
TabBar 导航标题栏组件，通常和TabBarView一起使用 tabController: 可以和TabBarView使用同一个controller
tabs: 具体的每个tab内容
indicator: 指示器
CustomScrollView 将多个滚动组件统一起来，共用scrollable和viewport，包含的子组件必须都是Sliver类型组件 slivers：接收一个sliver对象的数组
NestedScrollView 嵌套滚动组件 headerSliverBuilder：构建外部滚动组件，必须时Sliver; body：内部滚动组件，与NestedScrollView共用controller

滚动组件的缓存

设置addAutomaticKeepAlives 为true时，ListView会自动为子项添加一个根组件AutomaticKeepAlives;Flutter提供了一个AutomaticKeepAliveClientMixin的混合，可以在根组件的state中混入。

class _PageState extends State<Page> with AutomaticKeepAliveClientMixin {

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用
    return Center(child: Text("${widget.text}", textScaleFactor: 5));
  }

  @override
  bool get wantKeepAlive => true; // 是否需要缓存
}

弹框组件

组件名称 描述 常用属性
AlertDialog 提示确认框 title: 对话框标题;
content：对话框内容;
actions：对话框操作
SimpleDialog 选择框，用于列表选择 children: 接收SimpleDialogOption，用于处理选择
Dialog AlertDialog & SimpleDialog的基类，可用于自定义弹框

showDialog 是Material组件库里用于弹出对话框的方法。它的返回值Future为弹框操作的返回值。

Future<T?> showDialog<T>({
    required BuildContext context,
    required WidgetBuilder builder, //构建对话框内部UI
    bool barrierDismissible = true // 点击遮罩是否关闭对话框
});

ShowGeneralDialog 提供了一个弹出非Material风格的普通对话框方法。

Future<T?> showGeneralDialog<T>({
  required BuildContext context,
  required RoutePageBuilder pageBuilder, //构建对话框内部UI
  bool barrierDismissible = false, //点击遮罩是否关闭对话框
  String? barrierLabel, // 语义化标签(用于读屏软件)
  Color barrierColor = const Color(0x80000000), // 遮罩颜色
  Duration transitionDuration = const Duration(milliseconds: 200), // 对话框打开/关闭的动画时长
  RouteTransitionsBuilder? transitionBuilder, // 对话框打开/关闭的动画
  ...
})

showModalBottomSheet 提供了一个Material风格的底部弹框方法。

Future<T?> showModalBBottomSheet<T>({
    required BuildContext context,
    required WidgetBuilder builder,//构建对话框的UI
})

showDatePicker 提供了一个Materail风格的日期选择选择器

上一篇 下一篇

猜你喜欢

热点阅读