使用 onTap 只启动一个动画

Question

我的 onTap 小部件有问题，在我的情况下它允许启动一个小动画。我的问题是，当我按下菜单按钮时，我只想要一个动画开始，另一个（已经激活）必须 return 到它们的初始状态。感谢您的帮助

完整代码：

main.dart

import 'package:flutter/material.dart';
import './button.dart';

void main() => runApp(const MyStatefulWidget());

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key key}) : super(key: key);
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  List<bool> selected = [false, false, false, false, false];

  Container countryPageView() {
    final PageController controller =
        PageController(initialPage: 1, keepPage: true, viewportFraction: 0.35);
    return Container(
      height: 300,
      child: PageView.builder(
        scrollDirection: Axis.horizontal,
        controller: controller,
        itemCount: 5,
        physics: BouncingScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: gestureDetectorOntap(index),
          );
        },
      ),
    );
  }

  GestureDetector gestureDetectorOntap(int index) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected[index] = !selected[index];
        });
      },
      child: Column(
        // pass selected for this button
        children: [
          Text('menu $index'),
          button(selected[index])
        ], // animation function
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: countryPageView(),
      ),
    );
  }
}

带 AnimatedContainer 的动画

button.dart

import 'package:flutter/material.dart';
import './main.dart';

button(bool selected) {
  return AnimatedContainer(
    width: selected ? 200.0 : 100.0,
    height: selected ? 100.0 : 200.0,
    color: selected ? Colors.red : Colors.blue,
    alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
    duration: const Duration(seconds: 2),
    curve: Curves.fastOutSlowIn,
    child: const FlutterLogo(size: 75),
  );
}

Answer 1

替换

setState(() {
      selected[index] = !selected[index];
    });

和

setState(() {
      selected = [false, false, false, false, false];
      selected[index] = !selected[index];
    });

使用 onTap 只启动一个动画

Start only one animation with onTap

widget

dart

flutter