Flutter GridView GridView.count的使用 对数组的动态刷新 图片的上传 删除 布局使用Stack、Align、Positioned结合

Flutter GridView GridView.count的使用 对数组的动态刷新 图片的上传 删除

功能实现 对多张图片的上传 并可以实现图片点击右上角删除 使用 GridView.count 如图的效果 可以拍照上传或从相册选取

先上代码

GridView.count(
      shrinkWrap: true,
          children: _getRotationsList(),
          crossAxisCount: 3,
          crossAxisSpacing: 10, // 水平距离
          mainAxisSpacing: 10, // 垂直距离
          childAspectRatio: 1.0, // 宽高比例
    ),

_getRotationsListd的实现

//循环轮播图list
  List<Widget> _getRotationsList() {
    var temp =
        rotations.asMap().keys.map((index)=> Container(
            alignment: Alignment.center,
            child: Stack(
              children: <Widget>[
              //图片
                Align(
                  child: Image.file(
                    File(rotations[index]['rotation']),
                    height: 90,
                    width: 90,
                    fit: BoxFit.cover,
                  ),
                ),
                //图片右上角的删除
                Positioned(
                    left: 80,
                    top: 10,
                    child: InkWell(
                      onTap: () {
                        print(index);
                        setState(() {
                          rotations.removeAt(index);
                        });
                      },
                      child: Icon(
                        Icons.clear,
                        color: Colors.white,
                      ),
                    ))
              ],
            ),
          ));

    return temp.toList();
  }

GridView的属性

crossAxisCount：表示交叉轴方向的Item个数
例如 crossAxisCount = 3
scrollDirection : 用来指定滚动的方向，有两种，横向和纵向，默认为纵向，因此默认情况下纵轴是主轴，横轴是交叉轴。
mainAxisSpacing、crossAxisSpacing：主轴，交叉轴方向上Item之间的间距
childAspectRatio ：Item的宽高比，由于GridView的Item宽高并不由Item自身控制，默认情况下，交叉轴是横轴，因此Item的宽度均分屏幕宽度，这个时候设置childAspectRatio可以改变Item的高度，反之亦然；
childAspectRatio = 0.5的时候，宽度是高度的一半：

Stack Align Positioned的结合使用

Stack一般与Align或Positioned的结合使用
Align使用属性alignment 例如Alignment.center Alignment.topCenter 提供大致的定位

 Stack(
          children: <Widget>[
            Align(
              child: Icon(Icons.home, size: 40, color: Colors.white),
              alignment: Alignment.topCenter,
            ),
            Align(
              child: Icon(Icons.search, size: 40, color: Colors.pink),
              alignment: Alignment.bottomLeft,
            ),
            Icon(Icons.settings, size: 40, color: Colors.blue),
            Icon(Icons.arrow_drop_down, size: 40, color: Colors.red),
          ],
          alignment: Alignment.center,
        )

相比于Align窗口小部件布局的局限性（只能指定Aligment的几个属性），Positioned窗口小部件在绝对布局上更加贴合绝对的方式

Positioned使用属性left right top bottom等属性 提供更加精准的定位
Positioned相当于css里的relative属性

 Stack(
          children: <Widget>[
            Positioned(
                child: Icon(Icons.home, size: 40, color: Colors.white),
                left: 0,
                top: 0),
            Positioned(
                child: Icon(Icons.search, size: 40, color: Colors.pink),
                left: 0.4),
            Positioned(
                child: Icon(Icons.settings, size: 40, color: Colors.blue),
                bottom: 1),
          ],
          alignment: Alignment.center,
        )