Flutter 如何将小部件扩展为具有更多内容的更大小部件？答案

【问题标题】：Flutter How can I expand a widget into a bigger widget with more content?Flutter 如何将小部件扩展为具有更多内容的更大小部件？
【发布时间】：2021-05-29 13:03:12
【问题描述】：

我在一个列表中有一个带有一些文本的矩形，当用户点击进入一个更大的矩形时，我想扩展这个矩形，里面有更多的内容

例如，这是我的初始小部件：

当用户点击“矩形 1”时，我希望它扩展为：

【问题讨论】：

您正在寻找扩展磁贴。

标签： flutter animation widget expand

【解决方案1】：

您可以使用来自 Flutter 的新动画包。它允许您添加动画以将容器扩展为更大的容器，从而能够显示更大的内容。

您可以在此处找到该软件包的链接： https://pub.dev/packages/animations

如果您愿意，可以在此处找到如何实现它： https://www.youtube.com/watch?v=HHzAJdlEj1c

希望这能回答您的问题并帮助您。这不是很复杂的实现，例如放置一个手势检测器等。

【讨论】：

【解决方案2】：

您需要做的就是将小部件包装在手势检测器中，并将 onTap 方法设置为替换布尔变量，然后根据该变量的值决定是否显示其他内容。

这是一个例子：

class Test extends StatefulWidget {

  @override
  TestState createState() => TestState() ;

}

class TestState extends State<Test> {

bool showPlus = false ; 

  Widget build (BuildContext context) {
    return Scaffold (
     body : GestureDetector(
        onTap: () {
        setState (() {
          (showPlus) ? showPlus = false :showPlus = true ;
        });
  }, 
  child: Column(
   children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20 , vertical: 20),
              child: Text(
                  'Rect 1',
              ),
            ),
            (showPlus) ? Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(width: 100 , height: 100, color: Colors.white,),
                Container(width: 100 , height: 100, color: Colors.white,),
                Container(width: 100 , height: 100, color: Colors.white,),
              ],
            ) : SizedBox.shrink()
          ],
       )
      )
    );
   }
 }

【讨论】：