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

---

TabBar:

指针事件：Listener:

`

//指针事件
Listener(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.pink,
  ),
  onPointerDown: (e){
    print("down");
  },
  onPointerUp: (e){
    print("up");
  },
  onPointerMove: (e){
    print("move");
  },
),

`

手势事件GestureDetector：

`

//手势事件
GestureDetector(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
  onTap: (){
    print('tap');
  },
  onDoubleTap: (){
    print('doubletap');
  },
  onLongPress: (){
    print('longpress');
  },
)

`

页面跳转传参Navigator：

·

    
    //第一个页面
   Container(
      width: 200,
      height: 200,
      child: FlatButton(
          onPressed: () async{
              String res = await Navigator.push(context,new MaterialPageRoute(builder:(context)=> DetailPage(1,"aaa") ));
              print("接收的参数:"+ res);
          },
          child: Text("跳转")
      ),
    ),
//第二个页面
class DetailPage extends StatelessWidget {
  int id;
  String name;
  //通过构造函数接收参数
 DetailPage(this.id,this.name);
  @override
 Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title:Text("详情"),
      ),
      body:Container(
        child: RaisedButton(
              onPressed: (){
                Navigator.pop(context,"详情:detail");
              },
              child: Text("返回"+"id:"+this.id.toString()+'name:'+this.name),
        ),
      ),
    );
  }
}

·

http请求 dio

1. pubspec.yaml 安装依赖 dio
2. 引入：import 'package:dio/dio.dart';

`

//手势事件
GestureDetector(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Text(_data),
  ),
  onTap: () async{
      //接口请求
       Response res = await Dio().get("https://www.baidu.com");
      setState(() {
        _data = res.data.toString();
      });
  },
)

`