我想轻而易举地实现这种布局

Question

我想轻而易举地实现这种布局

layout image

我执行了以下步骤

我创建一个有状态的窗口小部件。
添加了gridview.count小部件以在屏幕上显示选定的图像。
在列表中添加了一个包含添加按钮的小部件，gridview将返回该小部件，以确保它将成为图像列表中的最后一项。
当我单击添加按钮时，我从图库中选择了一幅图像，并将其插入到setState方法内列表的开头，以便在列表更改时重新呈现窗口小部件。
已成功将图像添加到列表，但新添加的图像未出现在屏幕上。

代码

     class _AddScreenState extends State<AddScreen>{
        List<Widget> _images = [];


      void _getImage(BuildContext context, ImageSource source) {
          ImagePicker.pickImage(source: source, maxWidth: 
        400.0).then((File image) {
          print(image);
            setState(() {
              _images.insert(
                0,
                Container(
                    height: 80,
                    width: 80,
                    decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    image: DecorationImage(
                      image: FileImage(
                      image,
                      ),
                      fit: BoxFit.fill,
                    ),
                  ),
                ));
            });
          Navigator.pop(context);
        });
      }


        @override
        Widget build(BuildContext context) {
              return GridView.count(
                      padding: EdgeInsets.all(5),
                      mainAxisSpacing: 5,
                      crossAxisSpacing: 5,
                      shrinkWrap: true,
                      crossAxisCount: 3,
                      children: _images
                        ..add(
                          InkWell(
                            onTap: () {
                              _getImage(context,ImageSource.camera);
                            },
                            child: Container(
                              height: 80,
                              width: 80,
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                  image:

                  AssetImage('assets/images/ic_add_pic.png'),
                                  fit: BoxFit.fill,
                                ),
                              ),
                            ),
                          ),
                        ),
                      );
                    }
                   }

预期结果



当用户单击添加按钮时，每次添加新图像时，所选图像都必须添加到开头，并且添加按钮必须移到结尾。

Answer 1

请尽早从该方法中删除class MyView final : public Gtk::TreeView。只需选择您的图像，插入列表中，然后更改视图状态即可。

setState((){});

Answer 2

当我尝试此代码时，其工作正常

void _getImage(BuildContext context, ImageSource source) {
ImagePicker.pickImage(source: source, maxWidth: 400.0).then((File image) {

  setState(() {
    _images = [Container(
        height: 80,
        width: 80,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          image: DecorationImage(
            image: FileImage(
              image,
            ),
            fit: BoxFit.fill,
          ),
        ),
      )];
  });

      Navigator.pop(context);
   });
}

但是它仅添加了一张图像，我不明白为什么setState方法使用此代码重新渲染ui，但是当我使用insert方法时却不能与上述方法一起使用

当我将新项目插入setState方法布局内的列表时，无法在屏幕上反映出变化吗？

我想轻而易举地实现这种布局

2 个答案: