Flutter便捷组件插件easy_widgets的使用

简化并快速访问最常用的widget，同时方便访问扩展和功能/助手，这些功能/助手具有响应式特性。

特性

安装

flutter pub add easy_widgets

或者在pubspec.yaml文件中添加依赖：

dependencies:
  easy_widgets: ^0.0.4

导入

你只需要一个导入语句：

import 'package:easy_widget/easy_widget.dart';

初始化（必须）

为了实现响应式功能，你需要首先初始化easy widget。

方法一

如果您的应用程序尺寸不会改变（如Android或iOS），则可以在main.dart文件中的build函数内初始化easy widget，如下所示：

import 'package:easy_widget/easy_widget.dart';

/*
.
其余的代码
.
*/

@override
Widget build(BuildContext context) {
  EasyWidget.initiate(context,
      designHeight: 720, // 设计高度（可选）
      designWidth: 360, // 设计宽度（可选）
  ); // 必须在此处初始化easy widget。

  return YOURWIDGET(
    /*
    .
    你的代码
    .
    */
  );
}

方法二

如果您的应用程序尺寸会改变（如Web），则应该通过easy mixin来初始化easy widget。

import 'package:easy_widget/easy_widget.dart';

/*
.
其余的代码
.
*/

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with EasyMixin { // 必须将State类与EasyMixin一起扩展
/*
.
其余的代码
.
*/
}

// 如果你愿意传递设计尺寸，可以在init中这样设置：
@override
void initState() {
  setDesignDimension(360, 720); // 设置你的设计宽度和高度
  super.initState();
}

响应式

每个easy widget都是响应式的。其他数值可以通过使用.hWise或.wWise扩展来实现响应式。

例如：

Container(
  height: 200.hWise, // 高度将根据屏幕的高度进行调整，
  width: 200.wWise, // 宽度将根据屏幕的宽度进行调整，
);

你也可以在文本、按钮、填充等中使用相同的属性。

例如：

Text(
  'Lorem ispum',
  style: TextStyle(
    fontSize: 14.hWise, // 文本将根据屏幕的高度进行调整，
  ),
);

简化的小部件

有几个简化的小部件可以更快更轻松地配置。每个小部件都有详细的文档，帮助你理解如何使用它们。

可用的小部件有：

• EasyContainer() // 可用作按钮，添加溅水效果、动画等。
• EasyScrollList() // 轻松创建列表，带有分页、可选滚动、分隔符等。
• EasyGesture() // 轻松处理复杂的手势，如滑动。
• EasyInkTap() // 处理墨水点击，轻松添加波纹效果。
• EasyPadding() // 为你的小部件提供易于定制的填充。

多次push/pushNamed

你可以一次性推送多个页面，并带有动画，常用于深度链接或应用链接。

import 'package:easy_widget/easy_widget.dart';

/*
.
其余的代码
.
*/

void pushMultiplePages(){
  context.pushAll(
    [Page1(), Page2(), Page3()],
    transitionType: EasyTransitionType.rightToLeft, // 定义过渡类型/动画
  );
}

要一次推送多个命名路由，可以使用pushNamed方法。同时，你需要在generateRoute函数中返回EasyPageTransition。

例如：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Easy Widgets 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: "多次pushNamed",
      ),
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/first':
            return EasyPageTransition(
              child: Scaffold(
                appBar: AppBar(
                  title: Text('First'),
                ),
              ),
              type: EasyTransitionType.bottomToTop,
              settings: settings,
            );
          case '/second':
            return EasyPageTransition(
              child: Scaffold(
                appBar: AppBar(
                  title: Text('Second'),
                ),
              ),
              type: EasyTransitionType.bottomToTop,
              settings: settings,
            );
          default:
            return EasyPageTransition(
              child: Scaffold(
                appBar: AppBar(
                  title: Text('404'),
                ),
                body: Text('未找到路由').alignC,
              ),
              type: EasyTransitionType.bottomToTop,
              settings: settings,
            );
        }
      },
    );
  }
}

现在你可以简单地使用context.pushNamedAll函数来一次推送多个命名路由。确保参数列表的长度等于路由名称的长度，或者根本不传递参数。

void pushNamedAll(){
  context
        .pushNamedAll(routeNames: ['/first', '/second'], arguments: [{}, {}]);
}

页面过渡

使用EasyPageTransition类轻松处理页面过渡动画。

例如：

context.push(
  HomePage(),
  transitionType: EasyTransitionType.rightToLeft, // 定义过渡类型/动画
);