代码拉取完成，页面将自动刷新
体验用 tailwind 的方式去写 flutter 样式
温馨提示：体验一下就完事了，别真的用到项目上。
dependencies:
flutter_vant_kit: ^0.0.4
| doing | name | verison |
|---|---|---|
| 🚀 done | TwColor |
0.0.2 |
| 🚀 done | Spacing |
0.0.3 |
| 👷 doing | TwText |
- |
| 👷 doing | TwFont |
- |
| ⏳ planing | BorderRadius |
- |
| ⏳ planing | BorderWidth |
- |
| ⏳ planing | Divide |
- |
| ⏳ planing | Shadow |
- |
但从属性上来看这是一个略显鸡肋的东西，在我个人写 demo 的时候发现了不能设置多个方向和不同数值。
后面会从复合型Widget上面考虑，这样结合起来，可能会更加实用。
TwText 和 TwFont 结合使用，TwText 相当于 flutter 中的 Text 只不过多了一个className参数。
tailwind对比一下
<p class="font-sans text-lg font-medium text-slate-900">
The quick brown fox jumps over the lazy dog.
</p>
第一种，通过TwText
TwText(
'The quick brown fox jumps over the lazy dog.', className: [
/// 文字等宽
TwFont().sans,
/// 文字大小 + 行高
TwFont().text.lg,
/// 文字颜色
TwFont().slate.shade900,
/// 加粗
TwFont().medium
])
第二种，使用原生的Text,配合TextStyle扩展出来的 className 方法
Text(
'The quick brown fox jumps over the lazy dog.',
style: const TextStyle().className([
TwFont().sans,
TwFont().text.lg,
TwFont().medium,
TwFont().slate.shade900
]),
);
因为 TwFont 是一个类，所以无需安装插件，也可做到智能提示
| 属性 | 用法 | tailwind |
|---|---|---|
| Font Family | TwFont().{family} |
font-family |
| Font Size | TwFont().text.{size} |
font-size |
| Font Style | TwFont().{style} |
font-style |
| Font Weight | TwFont().{weight} |
font-weight |
| Letter Spacing | TwFont().tracking.{spacing} |
letter-spacing |
| Line Height | TwFont().leading.{height} |
line-height |
| Text Color | TwFont().text.{color} |
text-color |
| Text Decoration |
TwFont().{decoration}, decoraiton.{colot}, decoraiton.{style}, decoraiton.{thickness}
|
text-decoration |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型