如何修复闪烁（闪烁）的菜单屏幕？

Question

我添加了一个 GIF，您可以在其中看到，当我点击最喜欢的（心形）菜单时，它会顺利加载并且不会闪烁，但是当我点击侧边菜单时它会闪烁

我正在开发一个应用程序并且我正在尝试解决一个问题，每当我单击它时都会出现一个屏幕，它会闪烁或闪烁，它有点刷新。它包含的所有内容都会刷新，就像如果我点击它，我觉得我来到了那个屏幕，然后项目就会出现在那里，它会在几秒钟内发生摩擦，但这太烦人了。我什么都试过了，但还是。 我试图通过使用时间膨胀来全局减慢动画，但它仍在发生。

const String logo = "assets/profile/images/stadia_logo.svg";

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  @override
  Widget build(BuildContext context) {
    final user = Provider.of<User>(context);
    final StorageService ref = StorageService();
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;
    final logoHeight = screenHeight * 0.4;

    return Scaffold(
      backgroundColor: Colors.white,
      body: FutureBuilder(
          future: ref.getProfileUrl(user.uid),
          builder: (BuildContext context, AsyncSnapshot<String> url) {
            if (url.connectionState == ConnectionState.waiting) {
              return Loading(
                size: 20,
              );
            }
            if (url.hasData) {
              return StreamBuilder<DocumentSnapshot>(
                  stream: DatabaseService(uid: user.uid).userData,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return Loading(
                        size: 15,
                      );
                    }

                    if (snapshot.data == null) {
                      return Loading(
                        size: 15,
                      );
                    }

                    var userData = snapshot.data;
                    String _imageUrl = url.data;
                    if (snapshot.hasData) {
                      List books = userData['audio_read'];
                      if (books == null) {
                        return Loading(
                          size: 15,
                        );
                        //this
                      }
                      return Scaffold(
                        body: Stack(
                          children: <Widget>[
                            Transform.translate(
                              offset: Offset(screenWidth * 0.4, 10),
                              child: Transform.rotate(
                                angle: -0.1,
                                child: SvgPicture.asset(
                                  logo,
                                  height: logoHeight,
                                  color: logoTintColor,
                                ),
                              ),
                            ),
                            SingleChildScrollView(
                              child: Column(
                                children: <Widget>[
                                  SizedBox(
                                    height: 60,
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 16.0),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
//
                                        createFirstNameHeader(
                                            user, ref, userData),
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              right: 16.0, bottom: 16, top: 16),
                                          child: Material(
                                            elevation: 4,
                                            borderRadius:
                                                const BorderRadius.all(
                                                    Radius.circular(12)),
                                            child: Padding(
                                              padding: const EdgeInsets.only(
                                                  left: 16.0,
                                                  right: 16.0,
                                                  top: 16.0,
                                                  bottom: 32.0),
                                              child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  Row(
                                                    children: <Widget>[
                                                      Text(
                                                        "TOTAL TALES PLAYED",
                                                        style:
                                                            hoursPlayedLabelTextStyle,
                                                      ),
                                                    ],
                                                  ),
                                                  SizedBox(
                                                    height: 4,
                                                  ),
                                                  Text(
                                                    "${books.length.toString()} ${books.length > 1 ? "Tales" : "Tale"}",
                                                    style: hoursPlayedTextStyle
                                                        .copyWith(
                                                            color: Color(
                                                                0xff5E17EB)),
                                                  )
                                                ],
                                              ),
                                            ),
                                          ),
                                        ),
                                        ContentHeadingWidget(
                                            heading: "Continue listening"),
                                        for (var i = books.length - 1;
                                            i >= 0;
                                            i--)
                                          books.length > 0
                                              ? Slidable(
                                                  actionExtentRatio: 0.25,
                                                  actionPane:
                                                      SlidableDrawerActionPane(),
                                                  secondaryActions: <Widget>[
                                                    IconSlideAction(
                                                        caption: 'Delete',
                                                        color: Colors.red,
                                                        icon: Icons.delete,
                                                        onTap: () => {
                                                              _deletePressed(
                                                                  user,
                                                                  books.elementAt(
                                                                          i)[
                                                                      'audio_id']),
                                                            }),
                                                  ],
                                                  child: LastReadBook(
                                                      audioId: books.elementAt(
                                                          i)['audio_id'],
                                                      audio_index: int.parse(
                                                          books.elementAt(i)[
                                                              'audio_index']),
                                                      audioSeek: books.elementAt(
                                                          i)['audio_seek'],
                                                      total: books.elementAt(
                                                          i)['total'],
                                                      progress: int.parse(books.elementAt(i)['audio_index']) /
                                                          books.elementAt(
                                                              i)["totalIndex"],
                                                      description:
                                                          "${books.elementAt(i)["audio_index"]} of ${books.elementAt(i)["totalIndex"]} episodes",
                                                      image: books
                                                          .elementAt(i)['image']),
                                                )
                                              : Loading(
                                                  size: 15,
                                                ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                      );
                    } else {
                      return Loading(
                        size: 15,
                      );
                    }
                  });
            } else {
              return Loading(
                size: 15,
              );
            }
          }),
    );
  }

  Padding createFirstNameHeader(
      User user, StorageService ref, DocumentSnapshot userData) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 16.0,
      ),
      child: Row(
        children: <Widget>[
          createProfileImage(user, ref),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10.0),
            child: RichText(
              text: TextSpan(
                children: [
                  TextSpan(
                    text: 'Hello',
                    style: userNameTextStyle,
                  ),
                  TextSpan(text: '\n'),
                  TextSpan(
                      text: userData['firstname'], style: userNameTextStyle),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  createProfileImage(User user, StorageService ref) {
    return StreamBuilder(
        stream: Firestore.instance
            .collection("Users")
            .document(user.uid)
            .snapshots(),
        builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
//            return Center(
//              child: CircularProgressIndicator(),
//            );
            return Loading(
              size: 15,
            );
          }

          if (snapshot.data == null) {
            return Loading(
              size: 15,
            );
          }

          print(snapshot.data.data);
          return GestureDetector(
            onTap: () async {
              if (user.uid != HomeScreen.defaultUID) {
                dynamic imageFromUser = await ref.getImage();
                await ref.addImageToFirebase(user.uid, imageFromUser);
              } else {
                createAccountDialouge(context);
              }
            },
            child: RoundedImageWidget(
                imagePath: snapshot.data["profile_image"],
                icon: Icons.photo_camera,
                showIcon: true),
          );
        });
  }

  createAccountDialouge(BuildContext context) {
    return showDialog(
      context: context,
      child: CupertinoAlertDialog(
        title: Text('Avid Tale Would Like to Enable Full Access'),
        content: Text('Creating an account will enable access to this feature'),
        actions: <Widget>[
          CupertinoDialogAction(
            child: Text('Cancel'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
          CupertinoDialogAction(
            child: Text('Register'),
            onPressed: () {
              Navigator.pop(context);
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) {
                    return RegisterScreen();
                  },
                ),
              );
            },
          )
        ],
      ),
    );
  }

  void _deletePressed(user, bookId) async {
    DatabaseService userService = DatabaseService(uid: user.uid);

    DocumentSnapshot documentSnapshot =
        await Firestore.instance.collection("Users").document(user.uid).get();
    var data = documentSnapshot.data["audio_read"];

    data.retainWhere((element) => element["audio_id"] != bookId);
    await userService.updateUserData({'audio_read': FieldValue.delete()});
    await userService
        .updateUserData({'audio_read': FieldValue.arrayUnion(data)});
  }
}

Answer 1

每次删除项目时，都会在Stream 中触发一个新事件。当Stream 正在检索/处理新数据时，它进入这个if 代码块，因为connectionState 更改为waiting：

if (snapshot.connectionState == ConnectionState.waiting) {
  return Loading(
    size: 15,
  );
}

只需删除此代码块即可停止“闪烁”。如果您的应用程序需要，您可能需要包括其他数据可用性检查。