为什么向下滚动时我的图像消失了？

Question

我在一个页面中有 4 张卡片用于接收用户输入，这 4 张卡片小部件显示在列表视图中，当用户点击添加照片卡片时，用户可以成功地从相机或画廊添加照片，但是在用户添加照片并滚动后给其他卡片输入的页面，当AddPhoto卡片滑动消失时，用户返回页面初始点后，用户添加的图片没有显示。

我该如何解决？

class AddPhotoCard extends StatefulWidget {
  AddPhotoCard({this.subCategoryCardId,this.subCategoryId});

  final int subCategoryId;
  final int subCategoryCardId;

@override
  _AddPhotoCardState createState() => _AddPhotoCardState();
}
class _AddPhotoCardState extends State<AddPhotoCard> {
  String path;


  @override
  Widget build(BuildContext context) {

    return AnimatedPadding(
      duration: Duration(milliseconds: 500),
      padding: path==null?EdgeInsets.only(top: 7.5,left: 30,right: 30,bottom:7.5):
        EdgeInsets.only(top: 7.5,left: 7.5,right: 7.5,bottom:7.5),
      child: GestureDetector(
        onTap: (){
          _showOptions(context);
        },
        child: AnimatedContainer(
          duration: Duration(milliseconds:500),
          height: path==null?200:400,
          child:  Container(
            decoration: BoxDecoration(
              border: Border.all(style: BorderStyle.solid, width: 1),
              borderRadius: BorderRadius.circular(30),
              color:categoryModels[widget.subCategoryId].subCategoryModels[widget.subCategoryCardId].categoryColor.withOpacity(0.5),
            ),
            child: Padding(
              padding:EdgeInsets.all(5.0),
              child: Column(
                children: [
                  Expanded(
                    child: AspectRatio(
                      aspectRatio: 600/600,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(30),
                        child: Container(
                          decoration:  BoxDecoration(
                              image:  DecorationImage(
                                fit: BoxFit.fitWidth,
                                alignment: FractionalOffset.center,
                                image: path==null?AssetImage("images/stickerForRecipeScreen.png"):FileImage(File(path)),
                              )
                          ),
                        ),
                      ),
                    ),
                  ),
                  path==null?Text(
                    "${categoryModels[widget.subCategoryId].subCategoryModels[widget.subCategoryCardId]
                    .subCategoryName} tarifiniz için bir resim çekin",
                    style: TextStyle(
                      color: Colors.black,
                      fontFamily: "OpenSans",
                      fontWeight: FontWeight.bold,
                      fontSize: 20),): SizedBox.shrink(),
                  path==null?Icon(
                    Icons.camera_alt_rounded,
                    color: Colors.black,size: 70,): SizedBox.shrink(),
                  path==null?SizedBox(height: 20): SizedBox.shrink(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

出现此问题是因为 ListView 会自动销毁所有“滚走”的小部件。您需要让它们保持活动状态或增加缓存：

解决方案 1：将此添加到您的 ListView：

cacheExtent: 4 //the number of widgets you have and want to keepAlive

解决方案 2：使您的小部件保持活动状态：

//add this to the AddPhoto build method
super.build(context);

//add this to the end of the AddPhoto state, outside the build method
@override
bool get wantKeepAlive => true;

//add this then to your ListView
addAutomaticKeepAlives: true

为什么向下滚动时我的图像消失了？

Why does my image disappear when I scroll down?

camera

flutter