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

Question

以下问题：

我在剂量计算器应用程序和状态管理程序方面取得了很大进展，现在我正尝试在视觉上扩大规模。

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

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

以下是我的代码的必要部分：

下拉菜单:

@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 将 NOT 在它们之间设置动画，因为就框架而言，它们是相同的部件。在您希望设置动画的每个子子部件上设置一个唯一的 ValueKey。

Flutter 团队的 AnimatedSwitcher and check out the AnimatedSwitcher Widget of the Week 视频请参阅 Flutter 文档。

If the "new" child is the same widget type and key as the "old" child, but with different parameters, then AnimatedSwitcher will not do a transition between them, since as far as the framework is concerned, they are the same widget and the existing widget can be updated with the new parameters. To force the transition to occur, set a Key on each child widget that you wish to be considered unique (typically a ValueKey on the widget data that distinguishes this child from the others).

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

Animated Switcher in combination with case conditioned Streambuilder

flutter

flutter-animation