创建完全自定义设计的TabBar

Question

我想实现一个带有选项卡的TabBar，具有以下布局：

我发现了多个示例，其中整个 TabBar 背景被更改，但我无法找到如何单独自定义未选定选项卡的背景，因为灰色背景绑定到 TabView 而不是单个选项卡。

在提供的示例图像中，灰色背景进度取决于用于呈现相应 Tab/TabView 的数据的 bool 属性

isAvailable

。 绿色进度条指示哪些选项卡已完成。 灰色进度条指示哪些选项卡可用但尚未完成。 最后一个选项卡尚不可用，因此它不包含在灰色进度中。

问题： 如何实现如所提供的图像中那样的选项卡布局/设计？如果不使用 Tab/ TabView 小部件，还有其他方法吗？

感谢您的帮助！

Answer 1

Material 和 Cupertino TabBar 仅提供有限的自定义选项，因为两者都实现了定义的设计语言。

实现此目的的一种方法是使用带有

Positioned

和

Align

小部件的“Stack”完全自行实现 TabBar 部分，以组成上面显示的设计并控制控制

 所需的 

TabController

 TabBarView

“从自定义 TabBar 的事件中手动”。