一、根底组件

1.Text

widget:

• Text
• TextSpan: 行内

属性：
TextStyle

2.button

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)),
)

3. 图片和图标

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

4. 表单

• 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;});
            }
        )
      ],
    );
  }
}

二、布局类组件

1. 线性布局

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

罕用属性：

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

2. 弹性布局

• Flex
• Expanded : 子组件

罕用属性

• direction: 方向
• flex: 占比

3. 层叠布局（定位）

• Stack : 父 Widget
• Positioned : 子 Widget

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

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

4. 流式布局

主动换行

• Wrap
• Flow

Wrap 罕用属性

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

三、容器类组件

1. 填充 内边距 padding

• Padding

属性：

• padding:

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

2. 尺寸限度类容器

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

BoxConstraints 属性：

• constraints:

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

3. 装璜容器

• DecoratedBox

属性：

• decoration:

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

4. 变换

• 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

备注：

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

5. 容器

• Container

属性

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

四、可滚动组件

1.SingleChildScrollView

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

• Scrollbar
• SingleChildScrollView

2.ListView

• ListView
• ListView.builder
• ListView.separated

属性

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

ListView.builder 属性

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

ListView.separated 属性

• separatorBuilder：分割器结构器

3.GridView

网格滚动

• GridView

属性

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

SliverGridDelegateWithFixedCrossAxisCount : 横轴方向固定数量

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

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

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