在颤动中制作可扩展的容器答案

【问题标题】：Make expandable container in flutter在颤动中制作可扩展的容器
【发布时间】：2022-08-19 16:36:52
【问题描述】：

嗨，我是 Flutter 的新手，目前正在为某个项目工作。现在我需要创建一个包含 Column 子项的容器，该容器由标题文本和正文文本组成。

我希望容器的默认高度为 300，因此它将仅显示标题和可能 3 行正文文本，并且它将能够扩展以显示正文的其余部分。阅读完剩余的正文后，用户可以折叠容器并再次使其变小

问题是我怎样才能做到这一点？有什么包可以帮助我做到这一点吗？我发现 animatedContainer 可能会回答我的问题，但有没有更好的，比如最好的选择？

谢谢

我愿意提供帮助，但没有您尝试过的代码将很难提供帮助，但这可以帮助protocoderspoint.com/…

标签： flutter dart

【解决方案1】：

你可以试试这个ExpansionTile

带有展开箭头图标的单行 ListTile，可展开或折叠图块以显示或隐藏子项。

或ExpansionPanelList

一个材料扩展面板列表，用于布置其子项和动画扩展。

【讨论】：

【解决方案2】：

试试ExpansionTile。

https://api.flutter.dev/flutter/material/ExpansionTile-class.html

    import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    static const String _title = 'Flutter Code Sample';

    @override
    Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
    }
    }

    class MyStatefulWidget extends StatefulWidget {
    const MyStatefulWidget({Key? key}) : super(key: key);

    @override
    State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
    }

    class _MyStatefulWidgetState extends State<MyStatefulWidget> {
    bool _customTileExpanded = false;

    @override
    Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        const ExpansionTile(
          title: Text('ExpansionTile 1'),
          subtitle: Text('Trailing expansion arrow icon'),
          children: <Widget>[
            ListTile(title: Text('This is tile number 1')),
          ],
        ),
        ExpansionTile(
          title: const Text('ExpansionTile 2'),
          subtitle: const Text('Custom expansion arrow icon'),
          trailing: Icon(
            _customTileExpanded
                ? Icons.arrow_drop_down_circle
                : Icons.arrow_drop_down,
          ),
          children: const <Widget>[
            ListTile(title: Text('This is tile number 2')),
          ],
          onExpansionChanged: (bool expanded) {
            setState(() => _customTileExpanded = expanded);
          },
        ),
        const ExpansionTile(
          title: Text('ExpansionTile 3'),
          subtitle: Text('Leading expansion arrow icon'),
          controlAffinity: ListTileControlAffinity.leading,
          children: <Widget>[
            ListTile(title: Text('This is tile number 3')),
          ],
        ),
      ],
    );
    }
    }

【讨论】：