Flutter

Question

我有一个要创建 post 的页面。我正在使用 image_picker 包来获取图像，并且有一个提供程序可以将图像获取到 post 创建页面。有一个变量 selectedImagesList 用于存储用户选择图像后要显示的图像列表。

class _AddPostViewState extends State<AddPostView> {
  TextEditingController postTextController = TextEditingController();
  PostNotifier postNotifier(bool renderUi) =>
      Provider.of<PostNotifier>(context, listen: renderUi);
  int activeImageIndex = 0;
  List<File>? selectedImagesList = [];

  @override
  void initState() {
    postTextController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    print("disposing stuff");
    selectedImagesList = [];
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    selectedImagesList = postNotifier(true).selectedPostImages;

    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: const Text(
            "New Post",
            style: TextStyle(color: Colors.black),
          ),
          centerTitle: true,
        ),
        body: SingleChildScrollView(
          child: Column(children: [
            Column(
                Container(
                  child: TextField(
                    controller: postTextController,
                    decoration: const InputDecoration(
                        hintText: "Write something here..."),
                  ),
                ),
                const SizedBox(
                  height: 5,
                ),
                ElevatedButton(
                    onPressed: () {
                      postNotifier(false).pickPostImages();
                    },
                    child: selectedImagesList == null
                        ? const Text("Add Images")
                        : const Text("Reselect Images")),

                if (postNotifier(true).selectedPostImages != null) ...[
                  Container(
                    padding: const EdgeInsets.all(25.0),
                    height: 420,
                    width: 396,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        CarouselSlider.builder(
                            options: CarouselOptions(
                              onPageChanged: (index, reason) =>
                                  setState(() => activeImageIndex = index),
                            ),
                            itemCount: selectedImagesList!.length,
                            itemBuilder:
                                (BuildContext context, index, realIndex) {
                              final selectedImage = selectedImagesList?[index];
                              return buildImage(selectedImage!, index);
                            }),
                        const SizedBox(
                          height: 21,
                        ),
                        buildDotIndicator(),
                      ],
                    ),
                  ),
                ] else ...[
                  const SizedBox(
                    height: 0,
                  ),
                ],
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                    onPressed: () async {
                      final authenticationNotifier =
                          Provider.of<AuthenticationNotifier>(context,
                              listen: false);
                      var userEmail = await authenticationNotifier
                          .fetchUserEmail(context: context);
                      var postText = postTextController.text;
                      await postNotifier(false)
                          .uploadPostImageList(context: context);
                      var postMedia = postNotifier(false).uploadedImageUrlList;

                      if (postMedia != null) {
                        await postNotifier(false)
                            .addMultiImagePost(
                                context: context,
                                  //post dto
                                )
                            .whenComplete(
                          () {
                            SnackBarUtility.showSnackBar(
                                message: "Post added to database",
                                context: context);
                            postTextController.clear();
                            selectedImagesList = [];
                            Navigator.of(context).popAndPushNamed(HomeRoute);
                          },
                        );
                      } else {
                        SnackBarUtility.showSnackBar(
                            message: "Something went wrong", context: context);
                      }
                    },
                    child: const Text("Post")),
              ],
            )
          ]),
        ),
      ),
    );

我可以使用 .whenComplete() 清除 postTextController，但 selectedImagesList 仍然保留在那里，随后的 post 具有之前 post 的图像]s.

如上面代码所示，我也尝试在 void dispose() 函数中将 selectedImagesList 设置为空，但它不起作用。 post 上传后如何处理图像

Answer 1

您没有使用状态中定义的 selectedImagesList，而是使用 PostNotifier class 中定义的 selectedImagesList。所以在 dispose 方法中你应该清除 PostNotifier class.

中定义的 selectedImagesList

Flutter - 处置一个变量

Flutter - Dispose a variable

state

dispose

image

list