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

Question

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

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

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

Answer 1

您需要做的就是将小部件包装在手势检测器中，并将 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()
          ],
       )
      )
    );
   }
 }

Answer 2

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

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

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

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