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

标签 user-interface animation flutter

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

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

我该怎么做?

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

图片#1

Tab 1

图片#2

Tab 2

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

提前致谢!

最佳答案

实现这一目标的可能性有很多种,具体取决于您的具体意愿,这里有 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 是开始、结束等)以执行任何自定义操作 - 可能会更改状态并使用新图像触发重建

关于user-interface - 可拖动和可滑动的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56893703/

相关文章:

iOS6 vs iOS7 外观界面生成器

wpf - 如何使用 WPF 实现无边框窗口?

python - 从 CLI 运行时阻止 python GUI 程序退出

css 背景位置动画无限

swift : Sprite Animation Bug

ajax - 类似谷歌日历的界面

ios - Swift 中的持续动画 View

dart - 如何从 flutter 的列表中选择一个项目

flutter - 使用flutter_bloc在flutter中提交时如何验证表单?

flutter - 即使我使用了安全区域,容器1也没有偏离屏幕底部,这在带有弯曲边缘的手机中看起来更糟