flutter - AnimatedContainer-如何只展开一个，其余的留在下面？

Question

因此，我正在做一些事情，我想列出这些“胶囊”(圆角矩形容器)的列表。当用户点击其中任意一个时，它将扩展到全屏，而其余的则停留在较低的层上，并且不执行任何操作。

我正在使用AnimatedContainer和GestureDetector更改其状态。当只有一个时，它可以完美地满足我的需求。同时，一旦我在Column中添加更多内容，因为它是我在带有单个 bool(boolean) 值的GestureDetector中编码的单个Widget，它们都同时打开。而且我了解，即使我分别对它们进行编码，也基本上只会将周围的对象推开，而不是在它们上方打开。我将如何处理？

我尝试搜索此内容，但找不到任何有用的信息。希望答案能够对将来的项目有所帮助。

bool chatCapsuleTapped = false;
bool hasFullSize = false;

@override
  Widget build(BuildContext context) {
    Widget _chatCapsuleAnimation() {
      return GestureDetector(
        onTap: () {
          setState(() {
            chatCapsuleTapped = !chatCapsuleTapped;
            hasFullSize = true;
          });
        },
        child: AnimatedContainer(
          width: !chatCapsuleTapped ? 350 : MediaQuery.of(context).size.width,
          height: !chatCapsuleTapped ? 75 : MediaQuery.of(context).size.height,
          //color: !chatCapsuleTapped ? Colors.grey.withOpacity(1) : Colors.grey,
          decoration: BoxDecoration(
            color: !chatCapsuleTapped ? Colors.grey.shade500 : Colors.grey.shade300,
            borderRadius: !chatCapsuleTapped ? BorderRadius.circular(40) : BorderRadius.circular(0),
          ),
          child: !chatCapsuleTapped ? Container(child: Container(),) : Container(),
          duration: Duration(milliseconds: 500),
          curve: Curves.fastOutSlowIn,
        ),
      );
    }

    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _chatCapsuleAnimation(),
          ],
        ),
      ),
    );
  }
} ```

Answer 1

您可以使用Hero:
将每个小部件放在Hero小部件内，并根据index为其分配标签。
然后有一个全屏页面，其中包含较大版本的小部件，但具有与所点击项目相同的标签。
来自here的样本，可以将其粘贴到DartPad中

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Basic Hero Animation'),
      ),
      body: SingleChildScrollView(
          child: Column(
              children: List<Widget>.generate(5, (index) {
        return InkWell(
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute<void>(
                  builder: (BuildContext context) {
                    return Scaffold(
                      appBar: AppBar(
                        title: const Text('Full-Screen Page'),
                      ),
                      body: Container(
                        child: Hero(
                          // TAG should be same as the tapped item's index
                          tag: index.toString(),
                          child: SizedBox(
                            child: Container(
                                color: Colors.grey[(index + 1) * 100]),
                          ),
                        ),
                      ),
                    );
                  },
                ),
              );
            },
            child: Hero(
              // Assigning tag of item as its index in the list
              tag: index.toString(),
              child: Container(
                  height: 200, color: Colors.grey[(index + 1) * 100]),
            ));
      }))),
    );
  }
}

为了简单起见，我将目标页面放在了主文件的范围内，但是您可以制作一个单独的小部件并接受 index作为Bigger Hero标记的参数