在菜单中触发动画的问题

Question

我正在研究以下 link：https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

我稍微修改了一下，添加了一个带动画的菜单，问题是当我按下一个按钮时所有的动画同时开始，如何在我按下的按钮上开始动画。非常感谢

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> {
  bool selected = 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),
            //child :
          );
        },
      ),
    );
  }

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

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

button.dart

import 'package:flutter/material.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

因为 selected 是一个单一的状态变量，每个按钮都是相同的（因为每个按钮对于 selected 都有相同的值）。您可以使用布尔值列表来跟踪每个按钮的 selected 状态。

// selected boolean for each container
List<bool> selected = [false, false, false, false, false];

并在构建每个按钮时传递正确的那个

child: Column(
    // pass selected for this button
    children: [Text('menu $index'), button(selected[index])], // animation function
)

完整代码：

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> {
  // selected boolean for each container
  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),
            //child :
          );
        },
      ),
    );
  }

  GestureDetector gestureDetectorOntap(int index) {
    return GestureDetector(
      onTap: () {
        List<bool> newSelected = selected;
        newSelected[index] = !newSelected[index];
        setState(() {
          selected = newSelected;
        });
      },
      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(),
      ),
    );
  }
}

在菜单中触发动画的问题

Issue to trigger an animation in a menu

animation

dart

flutter