一、基础组件
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 createState() {
return _MyDropDownButton();
}
}
//实现build
class _MyDropDownButton extends State{
List getCityList(){
List 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: [
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
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
备注：
- RotatedBox:是作用于layout阶段，会作用到子组件所占用的实际空间上
- 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 //子元素在横轴长度和主轴长度的比例。