关于前端:Widget

widget:

Text
TextSpan: 行内

属性：
TextStyle

widget:

RaisedButton : 有背景色彩
OutlineButton : 有边框
FlatButton / MaterialButton: 通明
FloatingActionButton: 右下角悬浮
IconButton : 有 icon 图标按钮

属性：
shape: 设置按钮的形态，接管值是 ShapeBorder 类型

ShapeBorder 实现类如下：

BeveledRectangleBorder: 带斜角的长方形边框
CircleBorder: 圆形边框
RoundedRectangleBorder: 圆角矩形
stadiumBorder : 两端是半圆的边框

罕用属性：

side: 设置边框（色彩，宽度，款式）
borderRadius: 设置圆角

shape: RoundedRectangleBorder(
    side:BorderSide(
        color:Colors.red,
        width:2.0,
        style:BorderStyle.solid
    ),
    borderRadius: BorderRadius.all(Radius.circular(20)),
)

Image.asset() : 加载本地图片，须要在 pubspec.yaml 文件中配置 asset
Image.network() : 加载网络资源
Icon() : 加载 Icon 图标，如果引入内部 icon，须要在 pubspec.yaml 文件中配置 fonts

DropdownButton : 下拉框
Switch : 单选框
Checkbox: 复选框
TextField: 输入框
From : 表单
TextFromField: 表单输入框，能够校验

备注：

继承 StatefulWidget

// 继承 StatefulWidget，实现 creatState
class MyDropDownButton extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {return _MyDropDownButton();
  }
}
// 实现 build
class _MyDropDownButton extends State<MyDropDownButton>{List getCityList(){List<DropdownMenuItem> cityList = new List();
    cityList.add(DropdownMenuItem(child: new Text('北京'),value:1));
    cityList.add(DropdownMenuItem(child: new Text('上海'),value:2));
    cityList.add(DropdownMenuItem(child: new Text('广州'),value:3));
    return cityList;
  }
  var selectCity;
  @override
  Widget build(BuildContext context) {  
    return new Column(
      children: <Widget>[
        new DropdownButton(items: getCityList(),
            hint:new Text('城市'),
            value:selectCity,
            onChanged: (val){setState(() {selectCity = val;});
            }
        )
      ],
    );
  }
}

Row : 横向排列
Column：纵向排列

罕用属性：

mainAxisAlignment：主轴排列形式
crossAxisAlignment：纵轴排列形式
textDirection：子组件排列形式 ltr ,rtl
verticalDirection : 子组件排列形式 up ,down

Flex
Expanded : 子组件

罕用属性

direction: 方向
flex: 占比

Stack : 父 Widget
Positioned : 子 Widget

罕用属性（对于没有定位的组件）

alignment: 对齐形式
textDirection :
fit : 适应 Stack 的大小形式 expand，loose
overflow: 超出显示方式 clip,visible

主动换行

Wrap
Flow

Wrap 罕用属性

direction：方向
alignment: 主轴对齐形式
runAlignment: 穿插轴对齐形式
spacing: 主轴间距
runSpacing: 穿插轴间距
crossAxisAlignment: 穿插轴上子控件的对齐形式
textDirection：程度方向上子控件的起始地位
verticalDirection: 垂直方向上子控件的其实地位

Padding

属性：

padding:

EdgeInsets.all(10),
EdgeInsets.only(left:10),
EdgeInsets.fromLTRB(10, 20, 10, 20),

SizedBox : 给子元素指定固定的宽高
BoxConstraints : 设置限度条件

BoxConstraints 属性：

constraints:

BoxConstraints(
minWidth: 100, // 最小宽度
minHeight: 100,// 最小高度
maxWidth: double.infinity, // 最大宽度
maxHeight: double.infinity,// 最大高度
),

DecoratedBox

属性：

decoration:

BoxDecoration({
Color color, // 色彩
DecorationImage image,// 图片
BoxBorder border, // 边框
BorderRadiusGeometry borderRadius, // 圆角
List<BoxShadow> boxShadow, // 暗影, 能够指定多个
Gradient gradient, // 突变,LinearGradient RadialGradient
BlendMode backgroundBlendMode, // 背景混合模式
BoxShape shape = BoxShape.rectangle, // 形态
})

Transform : 变换 Matrix4.skewY(0.3)
Transform.translate : 平移 offset: Offset(-20.0, -5.0)
Transform.rotate：旋转 angle:math.pi/2
Transform.scale：缩放 scale: 2
RotatedBox : 旋转 quarterTurns：1

备注：

RotatedBox: 是作用于 layout 阶段，会作用到子组件所占用的理论空间上
Transform : 是利用在绘制阶段，所以无论对子组件利用何种变动，其占用空间的大小和在屏幕上的地位都是固定不变的，

Container

属性

margin: 外边距 EdgeInsets.all(20)
padding: 内边距 EdgeInsets.all(20)
alignment: 子组件对齐形式 Alignment.center

子元素内容不会超过屏幕太多时应用

Scrollbar
SingleChildScrollView

ListView
ListView.builder
ListView.separated

属性

itemExtent：子组件的长度（高度或宽度，与滚动方向统一）

ListView.builder 属性

itemBuilder：列表项的构建器
itemCount：列表项的数量，如果为 null，则为有限列表

ListView.separated 属性

separatorBuilder：分割器结构器

网格滚动

GridView

属性

scrollDirection：滚动方向 Axis.vertical
gridDelegate：管制子 widget

SliverGridDelegateWithFixedCrossAxisCount : 横轴方向固定数量

crossAxisCount: 4,// 横轴方向的数量
mainAxisSpacing: 0,// 主轴间距
crossAxisSpacing: 0,// 穿插轴间距
childAspectRatio: 1 // 子元素在横轴长度和主轴长度的比例。

SliverGridDelegateWithMaxCrossAxisExtent：横轴子元素为固定最大长度

maxCrossAxisExtent: 4,// 子元素在横轴上的最大长度
mainAxisSpacing: 0,// 主轴间距
crossAxisSpacing: 0,// 穿插轴间距
childAspectRatio: 1 // 子元素在横轴长度和主轴长度的比例。

关于前端:Widget

一、根底组件

1.Text

2.button

3. 图片和图标

4. 表单

二、布局类组件

1. 线性布局

2. 弹性布局

3. 层叠布局（定位）

4. 流式布局

三、容器类组件

1. 填充内边距 padding

2. 尺寸限度类容器

3. 装璜容器

4. 变换

5. 容器

四、可滚动组件

1.SingleChildScrollView

2.ListView

3.GridView