一、根底组件

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，实现creatStateclass MyDropDownButton extends StatefulWidget{  @override  State<StatefulWidget> createState() {    return _MyDropDownButton();  }}//实现buildclass _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 //子元素在横轴长度和主轴长度的比例。