使用可滚动小部件实现可扩展的用户配置文件部分

Question

我正在开发 Flutter 主屏幕设计，需要一些有关特定功能的帮助。这就是我想要实现的目标：

布局设计：

• 用户个人资料：这应该占据屏幕的 55%。
• 选项卡栏：在用户个人资料下方，我有一个带有两个选项卡的选项卡栏：“我的日历”和“我的日程安排”。
• 日期时间小部件和过滤器小部件：这些应放置在选项卡栏正下方的一行中。
• 时间表（期间列表）：位于日期时间和过滤器小部件下方。

可扩展的用户配置文件：

• 向下拖动用户个人资料部分时，它应该展开以覆盖整个屏幕并显示其他小部件（4-5 个小部件）。此展开视图应该是可滚动的。
• 向上滚动时，应返回到默认视图（屏幕的 55%）。 滚动完所有其他小部件后，展开的视图应折叠回默认视图。
• 这是我的目标的粗略草图：

展开个人资料视图

折叠个人资料视图

我的问题：

1. 如何实现用户个人资料部分的可展开和折叠功能？
2. 确保展开的视图可滚动并在所有小部件滚动时折叠的最佳方法是什么？
3. 是否有任何推荐的 Flutter 小部件或库可以帮助实现此功能？

Answer 1

为此使用类似

Expansion Tile

的内容。下面只是一个一般示例： 缩进可能不适合代码，因为它是通过电话编写的，但我已经提供了您可以在您的案例中使用的大部分属性。

ExpansionTile(
                             
collapsedBackgroundColor: nyanza,
                                backgroundColor: nyanza,
                                textColor: text,
                                collapsedTextColor: text,
                                collapsedIconColor: text,
                                iconColor: text,
                                title: const Text(
                                    'Take Quiz by Searching Quiz Title'),
                                collapsedShape: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Colors.transparent)),
                                shape: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: const BorderSide(
                                        color: Colors.transparent)),
                                onExpansionChanged: (value) {
                                  setState(() {
                                    isExpandedTitle = value;
                                  });
                                },
                                children: <Widget>[
                                  if (isExpandedTitle)
                                    //show expanded view,
                         if(!isExpandedTitle) // show normal view
                                   ],),