Widget

一、基础组件

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 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 //子元素在横轴长度和主轴长度的比例。

你可能感兴趣的