动画切换器与案例条件 Streambuilder 相结合

Question

以下问题：

我设法通过我的剂量计算器应用程序和状态管理程序取得了更大的进步，现在我正试图在视觉上扩大规模。

所以我想根据下拉菜单更改构建的小部件，实际上效果很好，但我正在尝试实现一个 AnimatedSwitcher，因此每次用户更改下拉菜单时，旧的小部件都会淡出，而新的小部件会消失而不仅仅是切换。搜索解决方案，找到了一个，但我不知道我是否以正确的方式实现它，因为我没有得到任何动画，但也没有错误消息。

我假设我使用了错误的孩子或缺少唯一键之类的东西（我不知道如何实现）

这是我的代码的必要部分：

下拉菜单：

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12.0),
      child:DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: selectedItem,
          onChanged: (String string) => setState(() {
            streamController.sink.add(string);
            return selectedItem = string;
          }),
          selectedItemBuilder: (BuildContext context) {
            return items.map<Widget>((String item) {
              return Text(item,
                //style: TextStyle(fontWeight: FontWeight.bold),
                textAlign: TextAlign.right,
              );
            }).toList();
          },
          items: items.map((String item) {
            return DropdownMenuItem<String>(
              child: Text('$item',
                //style: TextStyle(fontWeight: FontWeight.bold),
                textAlign: TextAlign.right,
              ),
              value: item,
            );
          }).toList(),
        ),
      ),
    );
  }
}

StreamBuilder 和 AnimatedSwitcher：

StreamBuilder(
            stream: streamController.stream,
            builder: (context, snapshot) {
               return AnimatedSwitcher(
                   duration: Duration(seconds: 1),
                    child: updateBestandteile(snapshot.data),
               );
            },
          ),

条件示例：

Padding updateBestandteile(String i) {
    switch (i) {

      case "MMF":
      {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 200,
            decoration: BoxDecoration(
              color: b,
              borderRadius: BorderRadius.circular(10.0)
              ),
            child: Align(
              alignment: Alignment.center,
              child: Row(
                children: [
                  Column(
                    children: [
                      Text('Zu verwendende Präparate:',
                        style: TextStyle(fontWeight: FontWeight.bold)),
                      Text('Medetomidin 1mg/ml'),
                      Text('Midazolam 5mg/ml'),
                      Text('Fentanyl 0.5mg/ml'),
                      Text('NaCl 0,9%'),
                    ],
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  ),
                  Column(
                    children: [
                      Text('Anzumischende Menge:',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text((MedetomidindosierungmgprokgKGW*selectedamount*selectedweight/(1000*Medetomidinmgproml)).toString()+"ml"),
                      Text((MidazolamdosierungmgprokgKGW*selectedamount*selectedweight/(1000*Midazolammgproml)).toString()+"ml"),
                      Text((FentanyldosierungmgprokgKGW*selectedamount*selectedweight/(1000*Fentanylmgproml)).toString()+"ml"),
                      Text((((MedetomidindosierungmgprokgKGW*selectedamount*selectedweight/(1000*Medetomidinmgproml))+(MidazolamdosierungmgprokgKGW*selectedamount*selectedweight/(1000*Midazolammgproml))+(FentanyldosierungmgprokgKGW*selectedamount*selectedweight/(1000*Fentanylmgproml)))*4).toString()+"ml"),
                  ],
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          ),
        ),
      ),
      );
      }
      break;

希望您能像上次一样提供帮助 :) 提前致谢！ 干杯， P

Answer 1

问题可能是您没有设置密钥。如果新的子小部件与旧的小部件类型相同，那么 AnimatedSwitcher 将在它们之间不动画，因为就框架而言，它们是相同的小部件。在您希望动画化的每个子子小部件上设置一个唯一的 ValueKey。

请参阅 Flutter 文档以获取 AnimatedSwitcher 并查看 Flutter 团队的 AnimatedSwitcher Widget of the Week 视频。

如果“新”子项与“旧”子项的小部件类型和键相同， 但是使用不同的参数，那么 AnimatedSwitcher 不会做 它们之间的过渡，因为就框架而言， 它们是相同的小部件，现有的小部件可以更新 新参数。 要强制进行转换，请将 Key 设置为 on 您希望被视为唯一的每个子小部件（通常是 小部件数据上的 ValueKey，可将此子项与 其他）。