Flutter TWind #

一个基于 Flutter 的现代化 UI 组件库，提供类似 Tailwind CSS 的样式系统和丰富的预构建组件。

✨ 特性 #

🎨 类 Tailwind CSS 样式系统 - 通过 className 属性快速应用样式
🧩 丰富的组件库 - 包含布局、视觉、交互等各类组件
📱 响应式设计 - 支持不同屏幕尺寸的自适应布局
🚀 高性能 - 优化的样式解析器和渲染性能
🔧 易于使用 - 简洁的 API 设计，快速上手
🎯 类型安全 - 完整的 Dart 类型支持

📦 安装 #

在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_twind: ^0.2.0

然后运行：

flutter pub get

🚀 快速开始 #

1. 导入库 #

import 'package:flutter_twind/flutter_twind.dart';

2. 基础使用 #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: WAppBar(
          title: WText('Flutter TWind Demo'),
          className: 'bg-blue-600',
        ),
        body: WContainer(
          className: 'p-4 bg-gray-50',
          child: WColumn(
            children: [
              WCard(
                className: 'mb-4 p-6',
                child: WColumn(
                  children: [
                    WText(
                      '欢迎使用 Flutter TWind',
                      className: 'text-xl font-bold text-gray-900 mb-2',
                    ),
                    WText(
                      '一个现代化的 Flutter UI 组件库',
                      className: 'text-gray-600 mb-4',
                    ),
                    WButton(
                      text: '开始使用',
                      className: 'bg-blue-500 hover:bg-blue-600',
                      onPressed: () => print('按钮被点击'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 样式系统 #

Flutter TWind 使用类似 Tailwind CSS 的样式类名：

// 间距
WContainer(className: 'p-4 m-2')  // padding: 16px, margin: 8px

// 颜色
WText('Hello', className: 'text-blue-500 bg-white')

// 尺寸
WContainer(className: 'w-full h-32')  // width: 100%, height: 128px

// 圆角和阴影
WCard(className: 'rounded-lg shadow-md')

颜色类 #

// 背景颜色
'bg-white', 'bg-gray-100', 'bg-blue-500', 'bg-red-500'

// 文本颜色
'text-gray-900', 'text-blue-600', 'text-red-500'

间距类 #

// 内边距
'p-1', 'p-2', 'p-4', 'p-6', 'p-8'
'px-4', 'py-2'  // 水平/垂直间距

// 外边距
'm-1', 'm-2', 'm-4', 'm-6', 'm-8'
'mx-4', 'my-2'  // 水平/垂直间距

尺寸类 #

// 宽度
'w-full', 'w-1/2', 'w-32', 'w-64'

// 高度
'h-full', 'h-32', 'h-64', 'h-screen'

// 字体大小
'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl'

🔧 高级用法 #

自定义主题 #

// 配置自定义颜色和样式
WindConfig.configure(
  colors: {
    'primary': Color(0xFF3B82F6),
    'secondary': Color(0xFF10B981),
  },
  spacing: {
    'xs': 4.0,
    'sm': 8.0,
    'md': 16.0,
    'lg': 24.0,
  },
);

响应式设计 #

WContainer(
  className: 'p-2 md:p-4 lg:p-6',  // 不同屏幕尺寸的间距
  child: WText(
    '响应式文本',
    className: 'text-sm md:text-base lg:text-lg',
  ),
)

🤝 贡献指南 #

我们欢迎所有形式的贡献！请阅读我们的贡献指南了解如何参与项目开发。

开发环境设置 #

Fork 这个仓库

克隆到本地：

git clone https://github.com/your-username/flutter_twind.git

安装依赖：
```
flutter pub get
```
运行测试：
```
flutter test
```

组件分类 #

🏗️ 布局组件 #

WContainer

容器组件，用于包装其他组件并提供样式装饰。

主要属性：

child: 子组件
className: 样式类名
width/height: 宽度/高度
padding/margin: 内边距/外边距
backgroundColor: 背景颜色
borderRadius: 圆角
boxShadow: 阴影
border: 边框

使用示例：

WContainer(
  className: "bg-white p-4 rounded-lg shadow-md",
  child: Text("Hello World"),
)

WFlex

Flex 布局组件，支持水平和垂直方向的弹性布局。

主要属性：

children: 子组件列表
direction: 布局方向 (Axis.horizontal/vertical)
mainAxisAlignment: 主轴对齐方式
crossAxisAlignment: 交叉轴对齐方式

使用示例：

WFlex(
  className: "p-4 bg-gray-100",
  direction: Axis.horizontal,
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    WText("左侧"),
    WText("右侧"),
  ],
)

WRow / WColumn

行/列布局组件，分别用于水平和垂直排列子组件。

使用示例：

WRow(
  className: "p-4",
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    WIcon(Icons.star),
    SizedBox(width: 8),
    WText("评分"),
  ],
)

WStack

堆叠布局组件，允许子组件重叠显示。

主要属性：

alignment: 对齐方式
fit: 适应方式
clipBehavior: 裁剪行为

WPositioned

定位组件，用于在 Stack 中精确定位子组件。

主要属性：

left/top/right/bottom: 定位偏移
width/height: 尺寸

🎨 视觉组件 #

WCard

卡片组件，提供阴影和圆角的容器效果。

主要属性：

child: 子组件
onTap: 点击回调
padding: 内边距（默认：16px）
margin: 外边距（默认：8px）
backgroundColor: 背景颜色（默认：白色）
boxShadow: 阴影（默认：中等阴影）
borderRadius: 圆角（默认：大圆角）

使用示例：

WCard(
  className: "m-4 p-6",
  onTap: () => print("卡片被点击"),
  child: Column(
    children: [
      WText("卡片标题", className: "text-lg font-bold"),
      WText("卡片内容"),
    ],
  ),
)

WText

文本组件，支持丰富的文本样式。

主要属性：

text: 文本内容
style: 文本样式
color: 文本颜色
fontSize: 字体大小
fontWeight: 字体粗细
textAlign: 文本对齐
maxLines: 最大行数
overflow: 溢出处理

使用示例：

WText(
  "这是一段文本",
  className: "text-blue-600 text-lg font-semibold",
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

WIcon

图标组件，显示 Material Design 图标。

主要属性：

icon: 图标数据
size: 图标大小（默认：24）
color: 图标颜色（默认：gray-700）

使用示例：

WIcon(
  Icons.favorite,
  className: "text-red-500",
  size: 32,
)

WImage

图片组件，支持各种图片显示效果。

主要属性：

image: 图片提供者
width/height: 尺寸
fit: 适应方式
borderRadius: 圆角
boxShadow: 阴影

使用示例：

WImage(
  image: NetworkImage("https://example.com/image.jpg"),
  className: "rounded-lg shadow-md",
  width: 200,
  height: 150,
  fit: BoxFit.cover,
)

WAvatar

头像组件，显示圆形头像。

主要属性：

radius: 半径（默认：20）
backgroundColor: 背景颜色（默认：gray-300）
backgroundImage: 背景图片
child: 子组件（通常是文本或图标）

使用示例：

WAvatar(
  radius: 30,
  backgroundImage: NetworkImage("https://example.com/avatar.jpg"),
)

WDivider

分割线组件，用于分隔内容。

主要属性：

height: 高度
thickness: 厚度（默认：1）
color: 颜色（默认：gray-200）
indent/endIndent: 缩进

🔧 交互组件 #

WButton

按钮组件，支持多种尺寸和状态。

主要属性：

text: 按钮文本
onPressed: 点击回调
size: 按钮尺寸（small/medium/large）
isLoading: 加载状态
isDisabled: 禁用状态
icon: 图标
backgroundColor: 背景颜色（默认：primary）
textColor: 文本颜色（默认：白色）

使用示例：

WButton(
  text: "提交",
  className: "bg-blue-500 hover:bg-blue-600",
  size: ButtonSize.large,
  icon: Icon(Icons.send),
  onPressed: () => print("按钮被点击"),
)

WInput

输入框组件，支持各种输入类型。

主要属性：

placeholder: 占位符文本
controller: 文本控制器
onChanged: 文本变化回调
obscureText: 密码模式
keyboardType: 键盘类型
prefixIcon/suffixIcon: 前缀/后缀图标
errorText: 错误文本
maxLines: 最大行数

使用示例：

WInput(
  placeholder: "请输入用户名",
  className: "border-gray-300 focus:border-blue-500",
  prefixIcon: Icon(Icons.person),
  controller: _usernameController,
  onChanged: (value) => print("输入：$value"),
)

📋 列表组件 #

WList

列表组件，支持滚动和分隔符。

主要属性：

children: 子组件列表
scrollDirection: 滚动方向
shrinkWrap: 收缩包装
physics: 滚动物理效果
separator: 分隔符组件

使用示例：

WList(
  className: "bg-white rounded-lg",
  separator: WDivider(),
  children: [
    WListTile(title: WText("项目 1")),
    WListTile(title: WText("项目 2")),
    WListTile(title: WText("项目 3")),
  ],
)

WListTile

列表项组件，标准的列表项布局。

主要属性：

leading: 前导组件
title: 标题组件
subtitle: 副标题组件
trailing: 尾随组件
onTap: 点击回调
selected: 选中状态
enabled: 启用状态

使用示例：

WListTile(
  leading: WIcon(Icons.settings),
  title: WText("设置"),
  subtitle: WText("应用程序设置"),
  trailing: WIcon(Icons.arrow_forward_ios),
  onTap: () => Navigator.push(...),
)

🛠️ 功能组件 #

WAppBar

应用栏组件，提供标准的应用栏布局。

主要属性：

title: 标题组件
actions: 操作按钮列表
leading: 前导组件
backgroundColor: 背景颜色（默认：primary）
foregroundColor: 前景颜色（默认：白色）
centerTitle: 标题居中（默认：true）
elevation: 阴影高度

使用示例：

WAppBar(
  title: WText("应用标题"),
  className: "bg-blue-600",
  actions: [
    IconButton(
      icon: WIcon(Icons.search),
      onPressed: () => print("搜索"),
    ),
  ],
)

WBadge

徽章组件，用于显示通知数量或状态。

主要属性：

child: 被装饰的子组件
text: 徽章文本
count: 数量
showZero: 是否显示零
backgroundColor: 背景颜色（默认：red-500）
alignment: 对齐位置
offset: 偏移量

使用示例：

WBadge(
  count: 5,
  child: WIcon(Icons.notifications),
)

WDialog

对话框组件，用于显示模态对话框。

主要属性：

child: 对话框内容
title: 标题
actions: 操作按钮
barrierDismissible: 点击外部关闭
width/height: 尺寸

使用示例：

// 显示对话框
WDialog.show(
  context: context,
  title: "确认删除",
  child: WText("确定要删除这个项目吗？"),
  actions: [
    WButton(
      text: "取消",
      onPressed: () => Navigator.pop(context),
    ),
    WButton(
      text: "删除",
      onPressed: () {
        // 执行删除操作
        Navigator.pop(context);
      },
    ),
  ],
);

样式系统 #

className 属性 #

所有组件都支持 className 属性，用于应用预定义的样式类。样式类遵循类似 Tailwind CSS 的命名规范：

间距类：

p-4: padding: 16px
m-2: margin: 8px
px-4: 水平 padding: 16px
py-2: 垂直 padding: 8px

颜色类：

bg-white: 白色背景
bg-primary: 主色背景
text-gray-900: 深灰色文本
text-blue-500: 蓝色文本

尺寸类：

w-full: 宽度 100%
h-32: 高度 128px
text-lg: 大字体
text-sm: 小字体

圆角类：

rounded: 小圆角
rounded-lg: 大圆角
rounded-full: 完全圆角

阴影类：

shadow-sm: 小阴影
shadow-md: 中等阴影
shadow-lg: 大阴影

组合使用 #

WCard(
  className: "bg-white p-6 m-4 rounded-xl shadow-lg border border-gray-200",
  child: WColumn(
    children: [
      WText(
        "卡片标题",
        className: "text-xl font-bold text-gray-900 mb-2",
      ),
      WText(
        "这是卡片的描述内容",
        className: "text-gray-600 text-sm",
      ),
      SizedBox(height: 16),
      WButton(
        text: "了解更多",
        className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg",
        onPressed: () => print("按钮点击"),
      ),
    ],
  ),
)

提交规范 #

使用清晰的提交信息
遵循 Conventional Commits 规范
确保所有测试通过
添加必要的文档

🐛 问题反馈 #

如果您发现了 bug 或有功能建议，请在 GitHub Issues 中提交。

📄 许可证 #

本项目采用 MIT 许可证。

🙏 致谢 #

感谢 Tailwind CSS 提供的设计灵感
感谢 fluttersdk 提供的设计灵感
感谢 Flutter 团队提供的优秀框架
感谢所有贡献者的支持

📞 联系我们 #

📧 Email: qttq369@gmail.com

⭐ 如果这个项目对您有帮助，请给我们一个 star！

flutter_twind 0.2.0 flutter_twind: ^0.2.0 copied to clipboard

Metadata

Flutter TWind #

✨ 特性 #

📦 安装 #

🚀 快速开始 #

1. 导入库 #

2. 基础使用 #

3. 样式系统 #

颜色类 #

间距类 #

尺寸类 #

🔧 高级用法 #

自定义主题 #

响应式设计 #

🤝 贡献指南 #

开发环境设置 #

组件分类 #

🏗️ 布局组件 #

WContainer

WFlex

WRow / WColumn

WStack

WPositioned

🎨 视觉组件 #

WCard

WText

WIcon

WImage

WAvatar

WDivider

🔧 交互组件 #

WButton

WInput

📋 列表组件 #

WList

WListTile

🛠️ 功能组件 #

WAppBar

WBadge

WDialog

样式系统 #

className 属性 #

组合使用 #

提交规范 #

🐛 问题反馈 #

📄 许可证 #

🙏 致谢 #

📞 联系我们 #

← Metadata

Publisher

Weekly Downloads

Metadata

Topics

Documentation

License

Dependencies

More

flutter_twind 0.2.0
flutter_twind: ^0.2.0 copied to clipboard