如何在Flutter中实现点击问题显示答案的交互？Card组件尝试无效

下面是实现点击「是否存在Bitcode Method iOS App?」标题显示对应答案的完整方案，核心是通过状态管理控制内容的显示与隐藏：

完整代码示例 #

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('Bitcode相关问答')),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: FAQCard(
            question: '是否存在Bitcode Method iOS App?',
            answer: 'Bitcode是苹果提供的中间代码格式，iOS App可以选择启用Bitcode。在Xcode中，你可以在项目设置的Build Settings里找到Enable Bitcode选项，开启后编译时会生成Bitcode文件提交到App Store。不过从Xcode 14开始，苹果不再要求Bitcode，默认是关闭状态，但仍支持手动开启。',
          ),
        ),
      ),
    );
  }
}

class FAQCard extends StatefulWidget {
  final String question;
  final String answer;

  const FAQCard({super.key, required this.question, required this.answer});

  @override
  State<FAQCard> createState() => _FAQCardState();
}

class _FAQCardState extends State<FAQCard> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      child: Column(
        children: [
          // 可点击的标题区域
          ListTile(
            title: Text(widget.question, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
            trailing: Icon(
              _isExpanded ? Icons.expand_less : Icons.expand_more,
              color: Colors.blueAccent,
            ),
            onTap: () {
              setState(() {
                _isExpanded = !_isExpanded;
              });
            },
          ),
          // 条件渲染答案区域
          if (_isExpanded)
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Text(
                widget.answer,
                style: const TextStyle(height: 1.5),
              ),
            ),
        ],
      ),
    );
  }
}

关键实现点说明 #

• 状态管理：用StatefulWidget维护_isExpanded布尔变量，点击标题时调用setState切换状态，触发UI更新
• 可交互标题：使用ListTile组件，自带点击事件和箭头图标，能直观反馈展开/折叠状态；也可以用GestureDetector包裹自定义标题布局
• 条件渲染：通过if (_isExpanded)控制答案区域的显示与隐藏，只有展开状态下才渲染答案内容
• 样式自定义：可以调整Card的elevation（阴影）、shape（圆角），以及文本的字体、间距等，适配你的UI需求

扩展优化（可选） #

如果需要更流畅的动画效果，可以用AnimatedCrossFade替换条件渲染：

AnimatedCrossFade(
  duration: const Duration(milliseconds: 300),
  firstChild: const SizedBox.shrink(),
  secondChild: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    child: Text(widget.answer, style: const TextStyle(height: 1.5)),
  ),
  crossFadeState: _isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
)

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