Flutter技术问题：如何将Widget展开为包含更多内容的大Widget？

嘿，我来帮你搞定这个需求！在Flutter里实现点击矩形展开成更大内容的效果，核心思路就是用状态变量来控制Widget的尺寸和显示内容，点击时切换状态即可。我给你写个完整的示例，还加了平滑的过渡动画，体验更好～

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('可展开矩形示例')),
        body: const Center(child: ExpandableRect()),
      ),
    );
  }
}

class ExpandableRect extends StatefulWidget {
  const ExpandableRect({super.key});

  @override
  State<ExpandableRect> createState() => _ExpandableRectState();
}

class _ExpandableRectState extends State<ExpandableRect> {
  // 控制展开/收起的状态变量
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 点击时切换状态
      onTap: () => setState(() => _isExpanded = !_isExpanded),
      // 用AnimatedContainer实现平滑尺寸过渡
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        // 根据状态设置宽高
        width: _isExpanded ? 300 : 150,
        height: _isExpanded ? 200 : 80,
        decoration: BoxDecoration(
          color: Colors.lightBlueAccent,
          borderRadius: BorderRadius.circular(8),
        ),
        padding: const EdgeInsets.all(16),
        // 根据状态显示不同内容
        child: _isExpanded
            ? Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Text('Rect 1', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                  SizedBox(height: 12),
                  Text('这里是展开后的更多内容，可以放文本、图片甚至其他嵌套Widget！'),
                  SizedBox(height: 8),
                  Text('调整动画时长和曲线，还能定制过渡效果哦～'),
                ],
              )
            : const Center(
                child: Text('Rect 1', style: TextStyle(fontSize: 18)),
              ),
      ),
    );
  }
}

关键知识点解析 #

• GestureDetector：给矩形添加点击事件，触发setState()更新状态
• AnimatedContainer：替代普通Container，自动处理尺寸、颜色等属性变化的动画，让展开/收起更丝滑
• 状态变量_isExpanded：通过这个布尔值控制Widget的宽高和显示内容，setState()会通知Flutter重新构建UI

扩展小建议 #

• 如果需要完全切换两个不同的Widget，可以用AnimatedCrossFade组件
• 要是展开内容太多，可以用SingleChildScrollView包裹，避免内容溢出
• 自定义duration和curve参数，能做出更个性化的过渡动画

内容的提问来源于stack exchange，提问作者Kevin