flutter 基础组件

flutter 组件

main

名称	描述	url
MaterialApp	设置main必要的组件，包含路由、脚手架、主页等等
Scaffold	通常俗称为脚手架，Scaffold 实现了基本的 Material Design 布局结构	https://www.yiibai.com/flutter/flutter-scaffold.html
Scaffold.floatingActionButton	浮动到主体(body)表面的按钮	https://www.yiibai.com/flutter/flutter-scaffold.html
Scaffold.AppBar	顶部导航栏	https://www.yiibai.com/flutter/flutter-appbar.html
Scaffold.TabBar	显示水平行选项卡的Widget	https://www.yiibai.com/flutter/flutter-tabbar.html
Scaffold.bottomNavigationBar:BottomAppBar	显示在脚手架底部的导航栏	https://www.yiibai.com/flutter/flutter-bottomappbar.html
BottomNavigationBar	底部导航栏	https://www.yiibai.com/flutter/flutter-bottomnavigationbar.html
SplashScreen	启动屏幕(也叫闪屏)是用户在启动应用程序时看到的第一个屏幕。它也可以是应用程序的欢迎屏幕	https://www.yiibai.com/flutter/flutter-splashscreen.html
Banner	横幅(Banner)是在另一个Widget的表面和角落显示的对角消息。标语通常用于装饰和突出显示有关小部件的消息	https://www.yiibai.com/flutter/flutter-banner.html
statelessWidget	无状态组件
statefullWidget	有状态组件(根据用户交互或其他因素二变化的属性)

排版

| 名称 | 描述 |url|
|-------|-|--------|--------------|
| Container | (“容器”)是用于包含子窗口小部件的框。同时可以通过填充，边距，对齐方式等属性来设置其样式(div) | https://www.yiibai.com/flutter/flutter-container.html |
| Center | 居中内容,将唯一的子小部件放在其中心 | https://www.yiibai.com/flutter/flutter-center.html |
| Align | 用来包含另一个widget，并提供了alignment参数来对齐子widget的位置 | https://www.yiibai.com/flutter/flutter-align.html |
| Row | 行组件,一行排列 | https://www.yiibai.com/flutter/flutter-row.html |
| Column | 列组件，多列排列 | https://www.yiibai.com/flutter/flutter-column.html |
| Spacer | 创建一个空的、可调整的空间，用于调整 Flex 容器(例如 Column、Row 等)中子 Widget 之间的间距。 | https://www.yiibai.com/flutter/flutter-spacer.html |
| Expanded (spacer+内容) | 有助于根据主轴扩展 Row 或 Column 的子小部件的空间。需要注意的是，Row 的主轴是水平轴，Column 的主轴是垂直轴 | https://www.yiibai.com/flutter/flutter-expanded.html |
| Stack | 允许将其子部件放在彼此的顶部，第一个子部件将放置在底部 | https://www.yiibai.com/flutter/flutter-stack.html |
| IndexedStack | 次最多只显示一个小部件，并隐藏其他小部件。可以通过 index 属性指定要显示的子小部件 。如果索引为null，则不会显示任何子小部件。 | https://www.yiibai.com/flutter/flutter-indexedstack.html |

约束

| 名称 | 描述 | url|
|-------|-|--------|------|
| SizeBox | 一个透明的盒子，不能为其设置样式，一般用来限制子控件的大小，能强制子控件具有特定宽度和高度 | https://www.yiibai.com/flutter/flutter-sizedbox.html |
| RotatedBox (quarterTurns{1,2,-1,-2}) | 可将其子部件旋转四分之一圈。每个四分之一是 90 度或 -90 度的角度的box | https://www.yiibai.com/flutter/flutter-rotatedbox.html |
| Card | 用于创建一个带有四个圆角的矩形区域，并在其边缘上有阴影效果 | https://www.yiibai.com/flutter/flutter-card.html |
|CircleAvatar | 只是一个圆圈，可以在其中添加背景颜色、背景图像或一些文本。它通常用他的图像或他的姓名首字母代表用户 | https://www.yiibai.com/flutter/flutter-circleavatar.html |
| Border | 为一个框创建一个边框，包括 4 个边：上、下、左、右 | https://www.yiibai.com/flutter/flutter-border.html |
| RoundedRectangleBorder | 用于创建带圆角的矩形边框。它通常与 ShapeDecoration 一起使用来绘制一个圆角的盒子 | https://www.yiibai.com/flutter/flutter-roundedrectangleborder.html |
| ContinuousRectangleBorder | 在直边和圆角之间创建一个具有平滑连续过渡的矩形边框 | https://www.yiibai.com/flutter/flutter-continuousrectangleborder.html |
| CircleBorder | 用于在可用空间内创建尽可能大的圆形边框，通常与 ShapeDecoration 一起使用来绘制圆形 | https://www.yiibai.com/flutter/flutter-circleborder.html |
| StadiumBorder | 一个相对两侧有 2 个半圆的盒子(体育场 通常与 ShapeDecoration 一起使用来绘制边框) | https://www.yiibai.com/flutter/flutter-stadiumborder.html |
| SafeArea | 用于填充类似于刘海屏之类的屏幕的边距,在其中加入padding,保证多端设备中展示不受影响 | https://www.yiibai.com/flutter/flutter-stadiumborder.html |

约束方式

[
                Container (
                    margin: EdgeInsetsDirectional.fromSTEB(150, 70, 50, 30),
                    child:Text(
                        "الانتخابات الأمريكية في 2020",
                        style: TextStyle(fontSize: 18)
                    )
                )
              ]

变量    定义
bottomCenter    Alignment(0.0, 1.0)
bottomLeft    Alignment(-1.0, 1.0)
bottomRight    Alignment(1.0, 1.0)
center    Alignment(0.0, 0.0)
centerLeft    Alignment(-1.0, 0.0)
centerRight    Alignment(1.0, 0.0)
topCenter    Alignment(0.0, -1.0)
topLeft    Alignment(-1.0, -1.0)
topRight    Alignment(1.0, -1.0)

| 名称 | 描述 | url|
|-------|-|--------|------|
| EdgeInsetsGeometry | 用于为 Widget 创建内部填充或外部填充 | https://www.yiibai.com/flutter/flutter-edgeinsetsgeometry.html |
| EdgeInsetsGeometry-EdgeInsets.all | 用于为所有四个 left、top、right、bottom 属性创建一个具有相同值的 EdgeInsets 对象 | https://www.yiibai.com/flutter/flutter-edgeinsets.html |
| EdgeInsetsGeometry-EdgeInsets.fromLTRB | 用于根据 left、top、right 和 bottom 值创建 EdgeInsets 对象 | https://www.yiibai.com/flutter/flutter-edgeinsets.html |
| Alignment | 用于定义对齐子部件在其父部件中的位置的方式 | https://www.yiibai.com/flutter/flutter-alignment.html |
| AnimatedAlign | Align 组件的动画版本 | |
| Padding | 在widget之间来保留一些间距 | |
| AnimatedPadding | Padding 组件的动画版本，在设置的时间内缩放或放大到指定的padding | |

otherBox

| 名称 | 描述 | url|
|-------|-|--------|------|
| ConstrainedBox | 对其子组件添加额外的约束，子组件需要自动调整宽度和高度，以达到最佳的适配设计，那么这时候使用ConstrainedBox 是最佳的选择 |
| BoxConstraints | 对 RenderBox 布局的不可变布局约束 |
| UnconstrainedBox | 不会对子组件产生任何限制，允许其子组件按照本身大小绘制 |
| FittedBox | 当子组件的内容超出父组件大小时，FittedBox 组件的作用是对子组件进行缩放和对齐方式的设置 |
| OverflowBox | 允许子控件超出父控件的边界。这个特性主要可以用来实现文字或者按钮角标的 |
| SizedOverflowBox | 也允许子控件超出父控件的边界，但是它与OverflowBox不同的在于还可以对子组件进行尺寸部分的限制 |
| AspectRatio | 是调整子组件设定的宽高比，如播放视频时16:9或4:3等 |
| SizedOverflowBox | 设置一个控件的尺寸是相对尺寸时，比如当前按钮的宽度占父组件的150% |

base

button

| 名称 | 描述 |url|
|-------|-|--------|--------------|
| IconButton | 是一个带有图标的按钮，用户可以点击它来执行操作。IconButton 将不包含文本内容 | https://www.yiibai.com/flutter/flutter-iconbutton.html |
| FlatButton(旧) - TextButton(新) | FlatButton 用于创建高度为 0 的平面按钮,您可以通过使用 style 属性来自定义其样式(普通按钮) 如果 callback: onPressed 和 onLongPress 函数都没有指定，FlatButton 将被禁用并且触摸时没有响应。此外，它的颜色将由 disableColor 属性而不是 color 属性指示 | https://www.yiibai.com/flutter/flutter-flatbutton.html https://www.yiibai.com/flutter/flutter-textbutton.html|
| ElevatedButton | 复杂的button | https://www.yiibai.com/flutter/flutter-elevatedbutton.html |

loding

名称	描述	url
CircularProgressIndicator	循环进度指示器(绕圈圈的进度指示器)	https://www.yiibai.com/flutter/flutter-circularprogressindicator.html
LinearProgressIndicator	循环进度指示器(直线的进度指示器)	https://www.yiibai.com/flutter/flutter-linearprogressindicator.html

交互

名称	描述	url
SnackBar	在用户操作后提供简短的响应。它出现在屏幕底部，当时间到或用户在屏幕上的其他地方交互时会自动消失	https://www.yiibai.com/flutter/flutter-snackbar.html
SimpleDialog (选择列表)	用于创建一个由标题和选项列表组成的简单对话框，用户可以从列表中选择一个选项。每个选项通常是一个 SimpleDialogOption (带消息的选择)	https://www.yiibai.com/flutter/flutter-simpledialog.html
AlertDialog	对话框向用户发送消息的对话框	https://www.yiibai.com/flutter/flutter-simpledialog.html

base

名称	描述
InkWell (可实现水波纹) \ GestureDetector (无水波纹)	用于将某个widget包裹起来添加点击事件
Text	文本组件
RichText	输人框组件
TextSpan	富文本
Image	图片组件 分远程图片和本地图片
Icon	图标组件
listview	列表组件
Icon	图标组件

裁剪

名称	描述
ClipRect	给子组件裁剪为给定的矩形大小
ClipRRect	使用圆角矩形剪辑其子项的小部件
ClipOval	对子组件进行裁剪椭圆等效果
ClipPath	子组件定义一些复杂的图形时，比如五角星