Flutter内联标签视图插件inline_tab_view的使用

InlineTabView 是一个可以内联化的标签视图组件，它通过自定义渲染对象模仿了默认的 TabBarView 行为，但不会试图占用整个可用高度。这样可以避免使用一些hack性的技巧，并且提供了平滑的动画效果。

使用

你可以像使用原始的 TabBarView 一样使用 InlineTabView：

InlineTabView(
  controller: controller,
  children: [
    FirstChild(),
    SecondChild(),
    // 添加其他子部件以匹配 [controller.length]
  ],
),

检查 /example 文件夹中的应用程序，可以找到更复杂的用例和交互式演示。

示例代码

以下是一个完整的示例代码，展示了如何使用 InlineTabView 插件。

import 'package:flutter/material.dart';
import 'package:inline_tab_view/inline_tab_view.dart';

void main() {
  runApp(MaterialApp(
    title: 'InlineTabView 示例',
    theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        appBarTheme: AppBarTheme(color: Colors.teal)),
    home: Scaffold(
      appBar: AppBar(title: Text('InlineTabView 示例')),
      body: const InlineTabViewExample(),
    ),
  ));
}

class InlineTabViewExample extends StatefulWidget {
  const InlineTabViewExample({super.key});

  [@override](/user/override)
  State<InlineTabViewExample> createState() => _InlineTabViewExampleState();
}

class _InlineTabViewExampleState extends State<InlineTabViewExample> {
  bool _classicTabView = false;

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) => SingleChildScrollView(
        child: Column(
          children: [
            Text('这些示例包括一个 TabBar，经典的 TabBarView（限制在一个固定的高度），以及 InlineTabView。'),
            SwitchListTile(
              title: Text('显示经典 TabBarView'),
              subtitle: Text('在新的视图上方显示一个固定高度的 TabBarView'),
              value: _classicTabView,
              onChanged: (v) => setState(() => _classicTabView = v),
            ),
            Divider(),
            Text(
              '示例：两个带颜色的方块',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            FormSwitcher(
              displayClassical: _classicTabView,
              subforms: [
                (
                  Text('方块 1'),
                  Container(
                    height: 50,
                    width: 100,
                    color: Colors.red,
                  )
                ),
                (
                  Text('方块 2'),
                  Container(
                    height: 200,
                    width: 100,
                    color: Colors.blue,
                  )
                ),
              ],
            ),
            Divider(),
            Text(
              '示例：三个部件',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            FormSwitcher(
              displayClassical: _classicTabView,
              subforms: [
                (Text('部件 1'), Text(loremIpsum)),
                (
                  Text('部件 2'),
                  Column(
                    children: [
                      TextField(),
                      TextField(),
                      TextField(),
                    ],
                  )
                ),
                (
                  Text('部件 3'),
                  Container(
                    height: 200,
                    width: 100,
                    color: Colors.blue,
                  )
                ),
              ],
            ),
            Divider(),
            Text(
              '示例：二十个带颜色的方块',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            FormSwitcher(
              displayClassical: _classicTabView,
              subforms: [
                for (int i = 0; i < 20; i++)
                  (
                    Text('方块 $i'),
                    Container(
                      height: 50.0 + 4.0 * i,
                      width: 100.0,
                      color: (i % 2 == 0) ? Colors.red : Colors.blue,
                    )
                  ),
              ],
            ),
            SizedBox(
              height: 200,
            )
          ],
        ),
      );
}

class FormSwitcher extends StatefulWidget {
  const FormSwitcher({
    super.key,
    required this.displayClassical,
    required this.subforms,
  });

  final List<(Widget, Widget)> subforms;

  final bool displayClassical;

  [@override](/user/override)
  State<FormSwitcher> createState() => _FormSwitcherState();
}

class _FormSwitcherState extends State<FormSwitcher> with TickerProviderStateMixin {
  late final TabController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = TabController(length: widget.subforms.length, vsync: this);
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    assert(widget.subforms.isNotEmpty);
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        TabBar.secondary(
          controller: controller,
          tabs: [
            for (final f in widget.subforms)
              Padding(
                padding: EdgeInsets.all(8.0),
                child: f.$1,
              ),
          ],
        ),
        SizedBox(
          height: 10,
        ),
        if (widget.displayClassical)
          SizedBox(
            height: 210,
            child: TabBarView(
              controller: controller,
              children: [
                for (final f in widget.subforms)
                  Align(alignment: Alignment.topCenter, child: f.$2),
              ],
            ),
          ),
        if (widget.displayClassical)
          SizedBox(
            height: 8,
          ),
        InlineTabView(
          controller: controller,
          children: [
            for (final f in widget.subforms) f.$2,
          ],
        ),
        SizedBox(
          height: 24,
        )
      ],
    );
  }
}

const String loremIpsum =
    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.';