ScrollController 附加到多個滾動視圖。 flutter

Question

我嘗試使用 GetX 重建 Instagram 故事。 我總是收到這個問題。 誰能幫我解決這個問題？

ScrollController 附加到多個滾動視圖。 'package:flutter/src/widgets/scroll_controller.dart'：斷言失敗：第 109 行 pos 12：'_positions.length == 1'

我嘗試使用 GetX 重建 Instagram 故事。 我總是收到這個問題。 誰能幫我解決這個問題？

ScrollController 附加到多個滾動視圖。 'package:flutter/src/widgets/scroll_controller.dart'：斷言失敗：第 109 行 pos 12：'_positions.length == 1'

import 'package:flamingo/Business_Logic/GetXControllers/Pages_Controllers/Stories_Controller.dart';
import 'package:flamingo/Data/DataProviders/StoriesList.dart';
import 'package:flamingo/Data/Models/All_Models.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Stories extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<StoriesController>(
      init: StoriesController(),
      builder: (storiesCtrl) {
        return Scaffold(
          backgroundColor: Colors.black,
          body: GestureDetector(
            onTapDown: (details) => storiesCtrl.onTapDown(
                details, story[storiesCtrl.currentIndex.value]),
            child: Stack(
              children: <Widget>[
                PageView.builder(
                  controller: storiesCtrl.pageC,
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, i) {
                    final StoryModel s = story[i];
                    switch (s.media) {
                      case MediaType.image:
                        return Image.network(
                          s.image,
                          fit: BoxFit.cover,
                        );
                    }
                    return const SizedBox.shrink();
                  },
                ),
                Positioned(
                  top: 15.0,
                  left: 10.0,
                  right: 10.0,
                  child: Row(
                    children: story
                        .asMap()
                        .map((i, e) {
                          return MapEntry(
                              i,
                              Flexible(
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 1.5),
                                  child: LayoutBuilder(
                                      builder: (context, constraints) {
                                    return Stack(
                                      children: <Widget>[
                                        _buildContainer(
                                          double.infinity,
                                          i < storiesCtrl.currentIndex.value
                                              ? Colors.white
                                              : Colors.white.withOpacity(0.5),
                                        ),
                                        i == storiesCtrl.currentIndex.value
                                            ? AnimatedBuilder(
                                                animation: storiesCtrl.animC,
                                                builder: (context, child) {
                                                  return _buildContainer(
                                                    constraints.maxWidth *
                                                        storiesCtrl.animC.value,
                                                    Colors.white,
                                                  );
                                                },
                                              )
                                            : const SizedBox.shrink(),
                                      ],
                                    );
                                  }),
                                ),
                              ));
                        })
                        .values
                        .toList(),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Container _buildContainer(double width, Color color) {
    return Container(
      height: 5.0,
      width: width,
      decoration: BoxDecoration(
        color: color,
        border: Border.all(
          color: Colors.black26,
          width: 0.8,
        ),
        borderRadius: BorderRadius.circular(3.0),
      ),
    );
  }
}


import 'package:flamingo/Data/Models/StoryModel.dart';
import 'package:flamingo/Utils/AllUtils.dart';
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flamingo/Data/DataProviders/StoriesList.dart';
import 'package:get/get.dart';

class StoriesController extends GetxController
    with SingleGetTickerProviderMixin {
  List<StoryModel> stories;
  AnimationController animC;
  var pageC;
  var currentIndex = 0.obs;

  @override
  void onInit() {
    stories = story;
    super.onInit();
    pageC = PageController();
    animC = AnimationController(vsync: this);
    final StoryModel firstStory = stories.first;
    loadStory(story: firstStory, animateToPage: false);

    animC.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        animC.stop();
        animC.reset();

        if (currentIndex.value + 1 < stories.length) {
          currentIndex.value += 1;
          loadStory(story: stories[currentIndex.value]);
          update();
        } else {
          currentIndex.value = 0;
          loadStory(story: stories[currentIndex.value]);
          update();
        }
      }
    });
  }

  void onTapDown(TapDownDetails details, StoryModel s) {
    final double dx = details.globalPosition.dx;
    if (dx < GlobalSize.screenWidth / 3) {
      if (currentIndex.value - 1 >= 0) {
        currentIndex.value -= 1;
        loadStory(story: story[currentIndex.value]);
        update();
      }
    } else if (dx > 2 * GlobalSize.screenWidth / 3) {
      if (currentIndex.value + 1 < story.length) {
        currentIndex.value += 1;
        loadStory(story: story[currentIndex.value]);
      } else {
        currentIndex.value = 0;
        loadStory(story: story[currentIndex.value]);
      }
    }
  }

  void loadStory({StoryModel story, bool animateToPage = true}) {
    animC.stop();
    animC.reset();

    switch (story.media) {
      case MediaType.image:
        animC.duration = story.duration;
        animC.forward();
        break;
    }
    if (animateToPage) {
      pageC.animateToPage(
        currentIndex.value,
        duration: const Duration(microseconds: 1),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  void onClose() {
    pageC.value.dispose();
    animC.dispose();
    super.onClose();
  }
}

Answer 1

好的，所以我遇到了同樣的問題，但對我來說，它實際上與我使用 controller 的代碼無關。 如果您從多個頁面訪問相同的 controller，通常會出現此問題。 但是，如果您在路由器堆棧上有同一頁面的多個實例，也會發生這種情況。 在我的情況下，我在應用程序的其他地方使用Get.to()導航回我的主頁，這在堆棧上創建了我的主頁的另一個實例，因此出現了多個控制器錯誤。

所以為了解決它，我將Get.to()更改為Get.offAll() 。 如果您使用命名路由，請將Get.toNamed()切換為Get.offAllNamed() 。

如果在執行此操作后出現錯誤，表明不再找到您的控制器，請在綁定中設置permanent: true在使用Get.put()實例化 controller 時設置為 true： Get.put(Home(), permanent: true);

查看您的代碼，錯誤似乎不是來自使用相同的 controller 兩次，而是當您從應用程序中的某個位置路由回此頁面時可能會發生錯誤。 花了我很長時間才弄清楚，但本質上 Flutter 在您將相同的頁面添加到堆棧中時會創建另一個“共享”controller 實例，因此您必須在導航時從堆棧中刪除原始頁面。

如果有人從導航中收到此錯誤並且沒有使用 GetX 進行 state 管理，請使用Navigation.pushNamedAndRemoveUntil()導航回包含 controller 的頁面。