Flutter样式管理插件rlstyles的使用

可以使用类似 rn 的写法类写 flutter 减少 flutter 的地狱嵌套。

demo 演示视频

请访问以下链接查看演示视频：
https://www.bilibili.com/video/av71131117

tailwindcss 语法

参考 TailwindCSS 的语法：
https://www.bilibili.com/video/BV1U34y187As/

注意事项

不要在根级使用 flex:1，这样会导致在调试模式下正常，但在性能模式和发布模式下无法正常显示。

使用插件rlstyles

将 rlStyle 添加到您的 pubspec.yaml 文件中：

dependencies:
  rlstyles: 2.0.1

示例

示例代码可以直接运行本地 example 项目，其中包含 9 个小 demo 和一个新增的 grid 案例。

demo

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:rlstyles/Router.dart';
import 'package:rlstyles/Styles.dart';
import 'package:rlstyles/View.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class Demo1 extends StatelessWidget {
  const Demo1({this.navigation});
  final NavigationOption navigation;

  renderView() {
    List<dynamic> colorArr = [
      'blue',
      'red',
      '#f55fff',
      'rgba(255,12,13,1)',
      'rgb(12,5,78)',
      Colors.red,
      Colors.black.withOpacity(0.5),
      'linear-gradient(blue,red)'
    ];
    return View(
      styles: styles['wrap'],
      children: colorArr.map((f) {
        return View(
          styles: Styles(
            width: 300,
            height: 300,
            marginTop: 50,
            marginLeft: 50,
            marginRight: 10,
            backgroundColor: f,
          ),
        );
      }).toList(),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化 ScreenUtil，填入设计稿尺寸
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1330);
    return View(
      styles: styles['main'],
      children: <Widget>[
        renderView(),
      ],
    );
  }
}

const Map<String, Styles> styles = {
  'main': Styles(
    flexDirection: 'column',
    backgroundColor: 'white',
    overflow: 'scroll',
    width: double.infinity,
    height: double.infinity,
    paddingBottom: 100,
  ),
  'wrap': Styles(
    flexWrap: 'wrap',
    position: 'rel',
  ),
};

vueper 1楼•11 天前

更多关于Flutter样式管理插件rlstyles的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

rlstyles 是一个用于 Flutter 的样式管理插件，它可以帮助开发者更高效地管理和复用样式。通过 rlstyles，你可以将样式定义在单独的文件中，并在整个应用中轻松地引用这些样式，从而保持代码的一致性和可维护性。

安装 `rlstyles`

首先，你需要在 pubspec.yaml 文件中添加 rlstyles 依赖：

dependencies:
  flutter:
    sdk: flutter
  rlstyles: ^1.0.0  # 请使用最新版本

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

基本用法

定义样式

你可以在一个单独的文件中定义样式，例如 styles.dart：

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

class AppStyles {
  static final TextStyle heading1 = TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  );

  static final TextStyle bodyText = TextStyle(
    fontSize: 16,
    color: Colors.grey[600],
  );

  static final ButtonStyle primaryButton = ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(vertical: 12, horizontal: 24)),
    textStyle: MaterialStateProperty.all(TextStyle(color: Colors.white, fontSize: 16)),
  );
}

使用样式

在需要使用样式的地方，直接引用定义好的样式：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('rlstyles Example', style: AppStyles.heading1),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('This is a body text', style: AppStyles.bodyText),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              style: AppStyles.primaryButton,
              child: Text('Primary Button'),
            ),
          ],
        ),
      ),
    );
  }
}

高级用法

rlstyles 还支持更高级的用法，例如动态生成样式、响应式样式等。你可以根据应用的需求，灵活地使用这些功能。

动态生成样式

你可以根据不同的条件动态生成样式：

class AppStyles {
  static TextStyle dynamicTextStyle(bool isBold) {
    return TextStyle(
      fontSize: 16,
      fontWeight: isBold ? FontWeight.bold : FontWeight.normal,
      color: Colors.black,
    );
  }
}

在组件中使用：

Text('Dynamic Text', style: AppStyles.dynamicTextStyle(true)),

响应式样式

你可以根据屏幕大小或其他条件生成响应式样式：

class AppStyles {
  static TextStyle responsiveTextStyle(BuildContext context) {
    return TextStyle(
      fontSize: MediaQuery.of(context).size.width > 600 ? 24 : 16,
      color: Colors.black,
    );
  }
}