shadcn_ui-tabs

用途

Shadcn UI — Tabs 用于构建带标签页（Tab）的界面。ShadTabs<T> 一次只显示一个分层区块（标签面板），适合在多个内容区域之间切换。

主要能力

• ShadTabs<T>：标签页容器，负责一次显示一个面板。
• 必填参数 value：当前选中的标签值。
• 必填参数 tabs：一组 ShadTab<T>。
• 可选参数 tabBarConstraints：标签栏的布局约束（如 BoxConstraints）。
• 可选参数 contentConstraints：内容的布局约束（如 BoxConstraints）。
• 每个 ShadTab 由三部分组成：value（标签值）、child（标签文字/标签控件）、content（面板控件）。

使用方式

通过构造 ShadTabs 并传入 value 与 tabs 列表来使用，可为标签栏和内容区分别设置约束。

示例：

ShadTabs<String>(
  value: 'account',
  tabBarConstraints: const BoxConstraints(maxWidth: 400),
  contentConstraints: const BoxConstraints(maxWidth: 400),
  tabs: [
    ShadTab(
      value: 'account',
      content: ShadCard(
        title: const Text('Account'),
        description: const Text(
          "Make changes to your account here. Click save when you're done."),
        footer: const ShadButton(child: Text('Save changes')),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const SizedBox(height: 16),
            ShadInputFormField(label: const Text('Name'), initialValue: 'Ale'),
            const SizedBox(height: 8),
            ShadInputFormField(label: const Text('Username'), initialValue: 'nank1ro'),
            const SizedBox(height: 16),
          ],
        ),
      ),
      child: const Text('Account'),
    ),
    ShadTab(
      value: 'password',
      content: ShadCard(
        title: const Text('Password'),
        description: const Text(
          "Change your password here. After saving, you'll be logged out."),
        footer: const ShadButton(child: Text('Save password')),
        child: Column(
          children: [
            const SizedBox(height: 16),
            ShadInputFormField(label: const Text('Current password'), obscureText: true),
            const SizedBox(height: 8),
            ShadInputFormField(label: const Text('New password'), obscureText: true),
            const SizedBox(height: 16),
          ],
        ),
      ),
      child: const Text('Password'),
    ),
  ],
)

切换到不同标签时，如需更新选中状态，应使用 state 或 controller 来改变 value。

适用场景

• 添加标签面板。
• 分层/分区展示内容。
• 账户与密码等分栏设置表单。

限制

安装命令、平台支持、收费与价格信息暂未提供。