被动/动态更改子级堆栈顺序

Question

我有一个动态列表的堆栈小部件作为子响应多亏了GetX包。

Stack(
children: [
Obx(
() => Stack(
children: controller.pagesStack,
),
),
TopBar(),
Positioned(
bottom: Get.width * 0.01,
left: 0,
right: 0,
child: Center(child: Dock()),
),
],
),

在我的控制器中，我更改了列表pagesStack中的Widget的顺序，以呈现按在堆栈顶部的最后一个Widget。但是它不会重建/刷新UI。

class WebHomeController extends GetxController {
var pagesStack = <WebApp>[].obs;
openOrHideApp(WebApp webApp) {
if (pagesStack.isNotEmpty) {
pagesStack.firstWhere((element) => element.isTop.value).isTop.value =
false;
}
pagesStack.add(webApp);
}
putAppOnTopStack(String appName) {
pagesStack.firstWhere((webApp) => webApp.isTop.value).isTop.value = false;
int indexToMove =
pagesStack.indexWhere((webApp) => webApp.appName == appName);
pagesStack[indexToMove].isTop.value = true;
pagesStack.add(pagesStack.removeAt(indexToMove));
}
}

Answer 1

经过10多个小时，我终于找到了解决方案，感谢这个法国网站。

如果遇到同样的问题:

当一个堆栈中的数字和顺序连续或经常变化时，您的孩子的堆栈需要Key。

GestureDetector(
onTap: () => controller.addNewWidgetToMyStack(
WebApp(
key: UniqueKey(),
appName: appName,
isTop: true.obs,
),
),
child: PhysicalModel(..........

在上面的例子中，重要的元素是:key: UniqueKey()，