Dart 在1个按钮上点击颤振应该会使其余的按钮产生动画效果

主代码：

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return MyWidget(index + 1);
  },
),

MyWidget

是一个

StatefulWidget

并且它的

build（）

方法是

@override
Widget build(BuildContext context) {
  return FadeTransition(
    opacity: _controller,
    child: RaisedButton(
      child: Text(widget.index.toString()),
      onPressed: () {},
    ),
  );
}

需要做什么：

如你所见，我有5个按钮名为

123445

，我想实现的是当我点击任何按钮时，比如说

3

，除了

3

，其余的按钮都应该是动画。我怎么做

屏幕截图：

---

TL；DR:>当点击按钮3时，如何设置其他按钮的动画？

不确定这是否是最有效的方法，但这是可行的，对每个列表项使用

AnimatedWidget

：

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Example")),
        body: AnimatedListView(),
      ),
    );
  }
}

class AnimatedListView extends StatefulWidget {
  @override
  _AnimatedListViewState createState() => _AnimatedListViewState();
}

class _AnimatedListViewState extends State<AnimatedListView>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  int _selected;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.ease,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 5,
      itemBuilder: _buildListItem,
    );
  }

  Widget _buildListItem(BuildContext context, int index) {
    return AnimatedListItem(
      selected: _selected == index,
      animation: _animation,
      onTap: () {
        setState(() {
          _selected = index;
        });
        _controller.forward();
      },
    );
  }
}

class AnimatedListItem extends AnimatedWidget {
  final Tween<double> _opacityTween = Tween(begin: 1, end: 0);

  final GestureTapCallback onTap;
  final bool selected;

  AnimatedListItem(
      {Key key,
      @required Animation<double> animation,
      this.onTap,
      this.selected})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return Opacity(
      opacity: selected ? 1.0 : _opacityTween.evaluate(animation),
      child: ListTile(title: Text("Item"), onTap: onTap),
    );
  }
}

void main（）=>runApp（App（））；
类应用程序扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
appBar:appBar（标题：文本（“示例”）），
主体：AnimatedListView（），
),
);
}
}
类AnimatedListView扩展StatefulWidget{
@凌驾
_AnimatedListViewState createState（）=>\u AnimatedListViewState（）；
}
类_AnimatedListViewState扩展状态
使用SingleTickerProviderStateMixin{
动画控制器_控制器；
动画(动画),；
int_选定；
@凌驾
void initState（）{
super.initState（）；
_控制器=动画控制器(
vsync:这个,，
持续时间：持续时间（毫秒：1000），
);
_动画=曲线动画(
父节点：_控制器，
曲线：曲线，
);
}
@凌驾
无效处置（）{
super.dispose（）；
_controller.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回ListView.builder(
物品计数：5，
itemBuilder:\u buildListItem，
);
}
小部件_buildListItem（BuildContext上下文，int索引）{
返回AnimatedListItem(
选中：_selected==索引，
动画：_动画，
onTap:（）{
设置状态（）{
_选定=索引；
});
_controller.forward（）；
},
);
}
}
类AnimatedListItem扩展AnimatedWidget{
最终Tween _opacityTween=Tween（开始：1，结束：0）；
最后一个手势点击点击按钮；
最终选定目标；
动画列表项(
{键，
@所需动画，
这个.onTap，
此选项（已选择}）
：super（关键点：关键点，可收听：动画）；
@凌驾
小部件构建（构建上下文）{
最终动画=可收听；
返回不透明度(
不透明度：选定？1.0:_opacityTween.评估（动画），
子项：ListTile（标题：文本（“项”），onTap:onTap），
);
}
}

我知道这件事不需要使用

ListView

/

MyWidget

就可以轻松完成，但我的用例需要将

MyWidget

包装在

ListView

中。我想我需要使用

键

，但不确定他们如何在这里正确地实现它。你到底希望从中得到什么样的动画？任何像这里这样的动画

FadeTransition

ƒ或ñow