user-interface - 可拖动和可滑动的容器

Question

我是 Flutter 的新手，我正在寻找一种方法来实现一个简单的功能。一个可拖动的容器。

我有两组 UI 元素包装在 Container 小部件中。我希望能够通过向不同方向拖动或滑动来从一组转到另一组。

我该怎么做？

以下是我的 UI 设计示例图片，可帮助您了解我想要实现的目标:

图片#1

图片#2

如您所见，Image #1 和 Image #2 仅在我设计的底部有所不同。我已经创建了所有必要的 UI 元素并将它们包装在 Container 小部件中。现在我唯一需要的是能够从一组转到另一组。如果有一个回调方法可以在从一个组转换到另一个组时更新上面的按钮，那就太好了。

提前致谢!

Answer 1

实现这一目标的可能性有很多种，具体取决于您的具体意愿，这里有 3 个想法:

1. 使用 TabBarView 滑动整个屏幕，Tab1 将是您显示的第一个屏幕，Tab2 将是第二个屏幕 - 只有内容。 (你可能不想要那个，只是把它放在那里)。

2. 将容器分成两部分(垂直)，并将 TabBarView 放在底部，有 2 个选项卡:1 个用于今日部分，1 个用于每周部分。 (这里有一些示例，例如:divide screen into two equal parts in flutter)。

您还可以根据当前选项卡索引自定义构建方法以更改任何内容(例如顶部指示器)(如此处的询问和回答:How to get current tab index in Flutter)

对于更自定义的解决方案，您可以使用:

1. GestureDetector 环绕您的容器，并处理 OnHorizo​​ntalDragX(其中 X 是开始、结束等)以执行任何自定义操作 - 可能会更改状态并使用新图像触发重建