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

Posted 2023-02-23

【中文标题】Flutter 如何将小部件扩展为具有更多内容的更大小部件？

【英文标题】：Flutter How can I expand a widget into a bigger widget with more content?

【发布时间】：2021-05-29 13:03:12

【问题描述】：

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

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

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

【问题讨论】：

您正在寻找扩展磁贴。

【参考方案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()
          ],
       )
      )
    );