Flutter容器组件插件the_containers的使用

Flutter 容器组件插件 the_containers 的使用

TheContainers

TheContainers 是一组容器，简化了布局工作。它们是 Row、Column、Container 和 AnimatedContainer 的可替换版本，并允许在子元素之间设置自定义间距。

SeparatedRow 和 SeparatedColumn

SeparatedRow 和 SeparatedColumn 是 Row 和 Column 的替代品。它们允许通过设置 separatorSize 或 separator 属性来添加子元素之间的间距。

ContainerRow 和 ContainerColumn

ContainerRow 和 ContainerColumn 是可以作为行或列使用的 Container。除了所有与 Container 相关的属性外，还可以设置 separatorSize 或 separator 属性。

AnimatedContainerRow 和 AnimatedContainerColumn

AnimatedContainerRow 和 AnimatedContainerColumn 是可以作为行或列使用的 AnimatedContainer。除了所有与 AnimatedContainer 相关的属性外，还可以设置 separatorSize 或 separator 属性。

示例代码

// 忽略文件级别的公共成员 API 文档

import 'dart:async';

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TheContainers Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

// 枚举类型用于选择不同的标签页类型
enum TabType {
  separatedRow,
  separatedColumn,
  containerRow,
  containerColumn,
  animatedContainerRow,
  animatedContainerColumn;

  // 获取标签页名称
  String get tabName => name[0].toUpperCase() + name.substring(1);
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _itemCount = 3;

  late final Timer _timer;

  double _padding = 16;

  [@override](/user/override)
  void initState() {
    super.initState();

    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (mounted) {
        setState(() {
          _padding = _padding > 16 ? 4 : 32;
        });
      }
    });
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final tabs = TabType.values.map((e) => Tab(text: e.tabName)).toList();
    final children = TabType.values.map(_getTabView).toList();

    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TheContainers Demo'),
          bottom: TabBar(
            isScrollable: true,
            tabAlignment: TabAlignment.center,
            tabs: tabs,
          ),
        ),
        body: TabBarView(
          children: children,
        ),
      ),
    );
  }

  // 返回一个居中的滚动视图
  Widget _getTabContainer({
    required Axis scrollDirection,
    required Widget child,
  }) {
    return Center(
      child: SingleChildScrollView(
        scrollDirection: scrollDirection,
        child: child,
      ),
    );
  }

  // 根据标签页类型返回相应的视图
  Widget _getTabView(TabType tabType) {
    final children = List.generate(
      _itemCount,
      (index) => Container(
        color: Colors.deepPurple[100 * (index + 1)],
        height: 100,
        width: 100,
        child: Center(
          child: Text(
            'Item $index',
            style: const TextStyle(fontSize: 20),
          ),
        ),
      ),
    );

    return switch (tabType) {
      TabType.separatedRow => _getTabContainer(
          scrollDirection: Axis.horizontal,
          child: SeparatedRow(
            separatorSize: 16,
            children: children,
          ),
        ),
      TabType.separatedColumn => _getTabContainer(
          scrollDirection: Axis.vertical,
          child: SeparatedColumn(
            separatorSize: 16,
            children: children,
          ),
        ),
      TabType.containerRow => _getTabContainer(
          scrollDirection: Axis.horizontal,
          child: ContainerRow(
            separatorSize: 16,
            color: Colors.green[300],
            padding: EdgeInsets.all(_padding),
            children: children,
          ),
        ),
      TabType.containerColumn => _getTabContainer(
          scrollDirection: Axis.vertical,
          child: ContainerColumn(
            separatorSize: 16,
            color: Colors.green[300],
            padding: EdgeInsets.all(_padding),
            children: children,
          ),
        ),
      TabType.animatedContainerRow => _getTabContainer(
          scrollDirection: Axis.horizontal,
          child: AnimatedContainerRow(
            duration: const Duration(milliseconds: 300),
            separatorSize: 16,
            color: Colors.green[300],
            padding: EdgeInsets.all(_padding),
            children: children,
          ),
        ),
      TabType.animatedContainerColumn => _getTabContainer(
          scrollDirection: Axis.vertical,
          child: AnimatedContainerColumn(
            duration: const Duration(milliseconds: 300),
            separatorSize: 16,
            color: Colors.green[300],
            padding: EdgeInsets.all(_padding),
            children: children,
          ),
        ),
    };
  }
}