Flutter自定义组件插件playx_widget的使用

PlayX Widget 是一个用于 PlayX 生态系统的自定义工具组件包，旨在加快开发速度。

特性

• 常用的组件在每个项目中都需要。
• 导出的包包括：
  • package_info_plus
  • flutter_svg
  • Lottie
  • cached_network_image
  • flutter_screenutil

组件

• AppVersion：显示当前应用版本的组件。
• CenterLoading：类似 iOS 的圆形加载指示器。
• OptimizedScrollView：优化的滚动视图组件，使其子组件可滚动。它会自动调整大小以填充视口底部与最后一个组件之间的空间。
• ImageViewer：从资产、网络或缓存网络中轻松显示图像。
• KeepAliveWrapper：保持组件存活并防止其被销毁的包装器。
• IconViewer：显示图标数据、SVG、图像或文本的组件。
• AutoAnimatedList：当插入或删除项目时，自动为项目列表添加动画效果的组件。
• OptimizedCard：提供更好的阴影效果，使卡片看起来更像原生的卡片。
• OptimizedTextField：具有自动验证功能的定制文本字段。
• Marquee：使任何组件水平自动滚动的组件。
• AnimSearchBar：带有展开/折叠状态时显示动画的搜索栏组件。
• OptimizedButton：可用于显示任何类型的按钮的组件。
• OptimizedListTile：增强版的列表项组件，可以显示带标题、副标题、前导和尾随组件的卡片。
• AnimatedVisibility：通过更新组件透明度来控制子组件可见性的动画组件。
• TimerRefreshWidget：定期刷新其子组件的组件。
• ReadMore：允许根据字符数展开和折叠文本的组件。
• DashedLine：创建虚线组件。
• FadeIndexedStack：带有渐变动画的索引堆栈组件。
• FavoriteButton：显示收藏状态的按钮组件。

Playx

建议使用我们的 Playx 包： 该包预装了此组件包和其他功能，并且易于使用。

安装

在 pubspec.yaml 文件的 dependencies 部分添加以下行：

dependencies:
  playx_widget: ^0.1.9

示例代码

以下是使用 playx_widget 的完整示例代码：

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

void main() async {
  runApp(ScreenUtilInit(
    designSize: const Size(360, 690),
    minTextAdapt: true,
    splitScreenMode: true,
    builder: (context, child) {
      return const MaterialApp(title: 'Flutter Demo', home: MyApp());
    },
  ));
}

final focusNode = FocusNode();
final focusNode2 = FocusNode();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Playx Example'),
      ),
      body: OptimizedScrollView(
        child: Column(
          children: [
            const SizedBox(
              height: 100,
            ),
            const SizedBox(
              height: 100,
              child: AppVersion(
                prefix: 'Version ',
              ),
            ),
            const SizedBox(
              height: 100,
              child: CenterLoading(
                color: Colors.blue,
              ),
            ),
            SizedBox(
              height: 100,
              child: OptimizedTextField(
                hint: 'Search',
                focus: focusNode,
                nextFocus: focusNode2,
              ),
            ),
            SizedBox(
              height: 100,
              child: OptimizedTextField.cupertino(
                hint: 'Search',
                focus: focusNode2,
              ),
            ),
            const FavoriteButton(),
            const OptimizedCard(
              margin: EdgeInsets.all(16),
              width: double.infinity,
              height: 200,
              padding: EdgeInsets.all(12),
              child: Center(child: Text('Ahmed Mohamed')),
            ),
            Row(
              children: [
                Expanded(
                  child: OptimizedListTile(
                    leading: const Icon(Icons.speed),
                    title: SizedBox(
                      width: double.infinity,
                      child: Text(
                        'Speed',
                        textAlign: TextAlign.start,
                        style: TextStyle(fontSize: 14.sp),
                      ),
                    ),
                    subtitle: SizedBox(
                      width: double.infinity,
                      child: Text(
                        '30 km/h',
                        style: TextStyle(fontSize: 12.sp),
                        textAlign: TextAlign.start,
                      ),
                    ),
                    trailing: const Icon(Icons.car_repair),
                    contentPadding:
                        EdgeInsets.symmetric(horizontal: 8.w, vertical: 6.h),
                    horizontalSpace: 8.w,
                  ),
                ),
                const VerticalDashedLine(
                  height: 100,
                ),
                Expanded(
                  child: OptimizedListTile(
                    leading: const Icon(Icons.timer),
                    title: SizedBox(
                      width: double.infinity,
                      child: Text(
                        'Time',
                        textAlign: TextAlign.start,
                        style: TextStyle(fontSize: 14.sp),
                      ),
                    ),
                    subtitle: SizedBox(
                      width: double.infinity,
                      child: Text(
                        '22:00 PM',
                        style: TextStyle(fontSize: 12.sp),
                        textAlign: TextAlign.start,
                      ),
                    ),
                    contentPadding:
                        EdgeInsets.symmetric(horizontal: 8.w, vertical: 6.h),
                    horizontalSpace: 8.w,
                  ),
                ),
              ],
            ),
            const ImageViewer.cachedNetwork(
              'https://avatars.githubusercontent.com/u/35397170?s=200&v=4',
              height: 100,
            ),
            const DashedLine(),
            SizedBox(
              height: 100,
              width: double.infinity,
              child: AutoAnimatedList(
                items: const ['Ahmed', 'Mohamed', 'Mohsen'],
                itemBuilder: (BuildContext context, String item, int index) {
                  return Text(item);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}