Flutter布局插件kiss_layout的使用

Flutter布局插件kiss_layout的使用

kiss_layout 是一个帮助开发者在Flutter应用中创建一致UI布局的包。该系统采用T恤尺码（S, M, L）来实现一致的间距。该插件由First Mobile Digital Group SL开发。

特性

• 简单的T恤尺码系统 - 使用小、中、大三种尺寸来保持间距的一致性。
• 灵活的布局系统 - 轻松管理填充、间隔和圆角半径。
• 全局布局配置 - 在应用级别设置布局规则。
• 覆盖能力 - 可以为特定部分自定义布局。
• 响应式设计 - 简单处理不同屏幕尺寸。
• KISS原则 - 保持简单，愚蠢！代码干净且易于维护。
• 减少Flutter参数地狱 - 消除参数和字面量到处乱用的问题。

开始使用

首先，在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  kiss_layout: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本设置

将你的应用包裹在一个 Layout 组件中，以便提供全局布局设置：

void main() {
  runApp(
    Layout(
      child: MaterialApp(
        home: MyHomePage(),
      ),
    ),
  );
}

使用间距

kiss_layout 提供了一些预构建的间隔组件，用于保持一致的间距：

Column(
  children: [
    Text('Header'),
    const GapLarge(), // 大间距
    Text('Content'),
    const GapMedium(), // 中间距
    Text('Footer'),
    const GapSmall(), // 小间距
  ],
)

使用填充

内置的填充组件可以用来保持一致的边缘间距：

PaddingOuterMedium(
  child: Card(
    child: PaddingInnerSmall(
      child: Text('Content'),
    ),
  ),
)

更复杂的例子

下面是一个使用布局设置的自定义组件的例子：

class CustomCard extends StatelessWidget {
  const CustomCard({
    super.key,
    required this.title,
    required this.content,
  });

  final String title;
  final String content;

  @override
  Widget build(BuildContext context) {
    // 获取当前布局设置
    final layout = Layout.of(context);

    return Container(
      // 使用布局设置的圆角
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(layout.cornerRadii.medium),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            blurRadius: 4,
            offset: const Offset(0, 2),
            color: Colors.black.withOpacity(0.1),
          ),
        ],
      ),
      // 使用布局设置的边缘间距
      padding: layout.edgeSpacing.inner.medium,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: Theme.of(context).textTheme.titleMedium,
          ),
          // 使用布局设置的项目间距
          Gap(layout.itemSpacing.medium),
          Text(content),
          Gap(layout.itemSpacing.large),
          // 使用布局设置的动作大小
          SizedBox(
            width: layout.actionSizes.medium.width,
            height: layout.actionSizes.medium.height,
            child: ElevatedButton(
              onPressed: () {},
              child: const Text('Action'),
            ),
          ),
        ],
      ),
    );
  }
}

自定义布局设置

直接配置

你可以直接自定义布局设置：

Layout(
  itemSpacing: const LayoutItemGaps(
    large: 24.0,
    medium: 16.0,
    small: 8.0,
  ),
  edgeSpacing: const LayoutEdgeSpacing(
    outer: LayoutEdgeSpacingSizes(
      large: EdgeInsets.all(24),
      medium: EdgeInsets.all(16),
      small: EdgeInsets.all(8),
    ),
  ),
  child: YourWidget(),
)

预定义布局样式

你还可以创建自定义的布局子类，以在整个应用中保持一致的风格：

// 紧凑布局，间距更紧密，组件更小
class CompactLayout extends Layout {
  const CompactLayout({
    required super.child,
    super.key,
  }) : super(
          itemSpacing: const LayoutItemGaps(
            large: 16.0,
            medium: 8.0,
            small: 4.0,
          ),
          edgeSpacing: const LayoutEdgeSpacing(
            outer: LayoutEdgeSpacingSizes(
              large: EdgeInsets.all(16),
              medium: EdgeInsets.all(12),
              small: EdgeInsets.all(8),
            ),
            inner: LayoutEdgeSpacingSizes(
              large: EdgeInsets.all(12),
              medium: EdgeInsets.all(8),
              small: EdgeInsets.all(4),
            ),
          ),
          // 其他自定义设置
        );
}

// 宽敞布局，间距更大，组件更大
class SpaciousLayout extends Layout {
  const SpaciousLayout({
    required super.child,
    super.key,
  }) : super(
          itemSpacing: const LayoutItemGaps(
            large: 32.0,
            medium: 24.0,
            small: 16.0,
          ),
          edgeSpacing: const LayoutEdgeSpacing(
            outer: LayoutEdgeSpacingSizes(
              large: EdgeInsets.all(32),
              medium: EdgeInsets.all(24),
              small: EdgeInsets.all(16),
            ),
            // 其他自定义设置
          ),
        );
}

// 使用示例
void main() {
  runApp(
    CompactLayout(
      child: MaterialApp(
        home: MyCompactPage(),
      ),
    ),
  );
}

其他功能

• 边缘间距（外边距和内边距）
• 动作大小（按钮和其他交互元素的大小）
• 圆角半径（保持一致的圆角）
• 英雄大小（突出元素的大小）
• 模态底部表单配置
• 屏幕尺寸断点

如果我需要超过S、M、L的更多尺寸怎么办？

• 如果你在单个屏幕上需要更多的尺寸，请重新考虑你的设计或调整组件的组合。
• 如果应用的一部分需要更紧凑或更宽敞的布局，可以在该部分使用新的S、M、L尺寸。
• 如果你确实需要超过三个尺寸，请打开一个问题，我们会考虑添加更多的尺寸。

贡献

我们欢迎贡献！请随时提交Pull请求。

许可证

MIT License

Copyright (c) 2024 First Mobile Digital Group SL

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.