Flutter自定义组件库插件ag_widgets的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter自定义组件库插件ag_widgets的使用

OVERVIEW

ag_widgets 是一个全面的包，提供了多种用途广泛、用户友好的智能小部件，适用于日常开发项目。通过丰富的可定制小部件来提升你的应用程序，并简化工作流程，以实现各种任务和功能。

ag_widgets

ag_widgets 是一个综合性的包，提供了一套多功能、用户友好的智能小部件，用于日常开发项目。通过丰富的小部件来提升你的应用程序，并简化工作流程。

Getting Started

要开始使用 ag_widgets，请按照以下简单步骤操作：

  1. 将包添加到 pubspec.yaml 文件中：
    dependencies:
  ag_widgets: ^0.0.0  # Replace with the latest version

Importing the Package

要在 Dart 代码中使用 ag_widgets 包，只需按如下方式导入它：

import 'package:ag_widgets/ag_widgets.dart';

Let’s explore the package’s functions!

Widgets

AgCustomDivider

AgCustomDivider 是一个可定制的分隔符小部件，可以用于以不同样式分隔内容。它提供不同的分隔符样式，如普通线、渐变线、虚线和渐变虚线。此小部件允许你控制分隔符的粗细、颜色、末尾缩进、开头缩进、颜色列表（用于渐变）、间距（用于虚线）和笔触端点。

// 示例：带有渐变线样式的自定义分隔符
AgCustomDivider(
  weight: 2.0, // 线条粗细
  color: Colors.blue, // 颜色
  style: DividerStyle.gradientLine, // 样式为渐变线
  colorList: [Colors.blue, Colors.green], // 渐变颜色列表
  endIndent: 16.0, // 末尾缩进
  indent: 16.0, // 开头缩进
  strokeCap: StrokeCap.round, // 笔触端点为圆形
)
AgViewAllButton

AgViewAllButton 是一个可定制的 Flutter 小部件，设计用于显示标题和可选的“查看全部”按钮。通常用于导航到包含更多详细信息的列表或视图。

// 示例：带有“查看全部”按钮的小部件
AgViewAllButton(
  title: "Recent Articles", // 标题
  onTap: () {
    // 导航到最近的文章列表
    Navigator.push(context, MaterialPageRoute(builder: (context) => RecentArticlesScreen()));
  },
  titleTextStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), // 标题文本样式
  textSize: 20, // 文本大小
  viewAllText: "See All Articles", // “查看全部”按钮文本
  textColor: Colors.blue, // 文本颜色
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12), // 内边距
  showViewAll: true, // 是否显示“查看全部”按钮
  hideViewAllIcon: false, // 是否隐藏“查看全部”图标
)
AgCircleWidget

AgCircleWidget 是一个自定义 Flutter 小部件，提供了一个具有多种自定义选项的圆形容器。可以用于其他小部件的装饰或背景。

// 示例：圆形小部件
AgCircleWidget(
  size: 50.0, // 大小
  backgroundColor: Colors.transparent, // 背景颜色
  borderColor: Colors.black, // 边框颜色
  borderWidth: 0.0, // 边框宽度
  child: Text("A"), // 子小部件
  shadows: [BoxShadow(color: Colors.grey)], // 阴影
)
AgNumberTickerWidget

AgNumberTickerWidget 是一个管理数字并允许实时更新的控制器。

// 创建控制器
NumberTickerController controller = NumberTickerController();

// 示例：数字计数器小部件
AgNumberTickerWidget(
  controller: controller, // 控制器
  initialNumber: 123.45, // 初始数字
  textStyle: TextStyle(fontSize: 24, color: Colors.blue), // 文本样式
  fractionDigits: 2, // 小数位数
)
AgCachedImage

AgCachedImage 是一个用于显示缓存网络图像的小部件，具有可选的占位符和初始值作为备用。

// 示例：缓存图像小部件
AgCachedImage(
  imageUrl: 'https://example.com/image.jpg', // 图像 URL
  height: 150, // 高度
  width: 150, // 宽度
  fullName: 'John Doe', // 全名
  isCircle: true, // 是否为圆形
  isShowName: true, // 是否显示名称
  placeHolder: CircularProgressIndicator(), // 可选的占位符小部件
  boxFit: BoxFit.cover, // 可选的 BoxFit
  placeHoldChild: Icon(Icons.person), // 可选的占位符子小部件
  textSize: 20, // 可选的文本大小
)
AgNameInitialWidget

AgNameInitialWidget 是一个用于显示人名首字母的小部件，常用于用户头像或个人资料图片的占位符。

// 示例：名字首字母小部件
AgNameInitialWidget(
  name: 'John Doe', // 名字
  height: 60, // 高度
  width: 60, // 宽度
  maxInitials: 2, // 最大首字母数
  backgroundColor: [Colors.blue, Colors.green, Colors.red], // 背景颜色列表
  textColor: Colors.white, // 文本颜色
  isCircle: true, // 是否为圆形
  textSize: 24, // 文本大小
)
AgTapEffect

AgTapEffect 是一个简单的为任何子小部件添加点击效果（例如水波纹效果）的小部件。

// 示例：点击效果小部件
AgTapEffect(
  child: Container( // 子小部件
    width: 200,
    height: 50,
    color: Colors.blue,
    child: Center(
      child: Text(
        'Tap Me',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
  onTap: () {
    // 点击时执行的操作
    print('Widget tapped!');
  },
  enableRipple: true, // 启用水波纹效果
  behavior: HitTestBehavior.opaque, // 设置点击测试行为
)

Extensions

IconImage() Extension on String

IconImage 方法允许从本地资产或网络源加载图标。这是一个方便的工具，用于轻松显示图像。

// 示例：从字符串加载图标
"assets/images/placeholder.jpg".iconImage(),
svgIconImage() Extension on String

svgIconImage 方法允许从本地资产或网络源加载 SVG 图标。这是一个方便的工具，用于轻松显示图像。

// 示例：从字符串加载 SVG 图标
"assets/images/placeholder.svg".svgIconImage(),
wrapWithBracket() Extension on String

wrapWithBracket 函数是一个实用函数，根据指定的 BracketType 枚举将调用它的字符串包裹在括号或引号内。

// 示例：将字符串包裹在单引号内
String text = "Hello, World!";
String wrappedText = text.wrapWithBracket(BracketType.SingleQuote);
print(wrappedText); // 输出: 'Hello, World!'

Extesnsion on num, double & int.

1. asPercentageInDecimal()

将数值转换为其百分比的小数形式。

// 示例：将数值转换为百分比的小数形式
double value = 50;
double percentageInDecimal = value.asPercentageInDecimal();
// 输出: 0.5
2. calculatePercentageOf(double percentage)

计算指定百分比的数值。

// 示例：计算指定百分比的数值
double value = 50;
double result = value.calculatePercentageOf(20);
// 输出: 10.0

Enums

以下是枚举类型及其可能的值：

  • AppTheme: Light, Dark, SystemDefault
  • ScreenOrientation: Portrait, Landscape, Auto
  • UserAccountStatus: Active, Inactive, Banned
  • SortingOrder: Ascending, Descending
  • TaskPriority: Low, Medium, High, Urgent
  • ReminderFrequency: Daily, Weekly, Monthly, Yearly
  • Gender: Male, Female, Other, PreferNotToSay
  • PaymentStatus: Paid, Pending, Failed, Refunded
  • ReviewRatings: OneStar, TwoStars, ThreeStars, FourStars, FiveStars
  • Weather Conditions: Sunny, Rainy, Cloudy, Snowy
  • LanguageSkillLevels: Beginner, Intermediate, Advanced, Fluent
  • TemperatureUnits: Celsius, Fahrenheit
  • TrafficLightColors: Red, Yellow, Green
  • FoodCategories: Breakfast, Lunch, Dinner, Snack, Dessert

示例 Demo

下面是一个完整的示例 demo，展示了如何使用 ag_widgets 包中的多个小部件。

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

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  NumberTickerController numberTickerController = NumberTickerController();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AG Widgets'),
          elevation: 8,
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 自定义分隔符示例
              Text("自定义分隔符示例", style: TextStyle(fontSize: 18)),
              SizedBox(height: 20),
              AgCustomDivider(
                weight: 8.0,
                color: Colors.blue,
                style: DividerStyle.gradientLine,
                colorList: [Colors.blue, Colors.green],
                endIndent: 16.0,
                indent: 16.0,
                strokeCap: StrokeCap.round,
              ),
              SizedBox(height: 20),

              // 查看全部按钮示例
              Text("查看全部按钮示例", style: TextStyle(fontSize: 18)),
              SizedBox(height: 20),
              AgViewAllButton(
                title: "最近文章",
                onTap: () {
                  // 导航到最近的文章列表
                  // Navigator.push(context, MaterialPageRoute(builder: (context) => RecentArticlesScreen()));
                },
                titleTextStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                textSize: 20,
                viewAllText: "查看所有文章",
                textColor: Colors.blue,
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                showViewAll: true,
                hideViewAllIcon: false,
              ),
              SizedBox(height: 20),

              // 圆形小部件示例
              Text("圆形小部件示例", style: TextStyle(fontSize: 18)),
              SizedBox(height: 20),
              AgCircleWidget(
                size: 50.0,
                backgroundColor: Colors.transparent,
                borderColor: Colors.black,
                borderWidth: 0.0,
                child: Text("A"),
                shadows: [BoxShadow(color: Colors.grey)],
              ),
              SizedBox(height: 20),

              // 数字计数器小部件示例
              Text("数字计数器小部件示例", style: TextStyle(fontSize: 18)),
              SizedBox(height: 20),
              AgNumberTickerWidget(
                controller: numberTickerController,
                initialNumber: 20,
                textStyle: TextStyle(fontSize: 24, color: Colors.blue),
                fractionDigits: 2,
              ),
              SizedBox(height: 20),
              TextButton(
                onPressed: () {
                  numberTickerController.number = numberTickerController.value + 1;
                },
                child: Text("点击我"),
              ),
              SizedBox(height: 20),

              // 缓存图像小部件示例
              Text("缓存图像小部件示例", style: TextStyle(fontSize: 18)),
              SizedBox(height: 20),
              AgCachedImage(
                imageUrl: 'https://example.com/image.jpg',
                height: 150,
                width: 150,
                fullName: 'John Doe',
                isCircle: true,
                isShowName: true,
                placeHolder: CircularProgressIndicator(),
                boxFit: BoxFit.cover,
                placeHoldChild: Icon(Icons.person),
                textSize: 20,
              ),
              SizedBox(height: 20),

              // 名字首字母小部件示例
              Text("名字首字母小部件示例", style: TextStyle(fontSize: 18)),
              SizedBox(height: 20),
              AgNameInitialWidget(
                name: 'John Doe',
                height: 60,
                width: 60,
                maxInitials: 2,
                backgroundColor: [Colors.blue, Colors.green, Colors.red],
                textColor: Colors.white,
                isCircle: true,
                textSize: 24,
              ),
              SizedBox(height: 20),

              // 点击效果小部件示例
              Text("点击效果小部件示例", style: TextStyle(fontSize: 18)),
              SizedBox(height: 20),
              AgTapEffect(
                child: Container(
                  width: 200,
                  height: 50,
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      '点击我',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                onTap: () {
                  // 点击时执行的操作
                  print('Widget tapped!');
                },
                enableRipple: true,
                behavior: HitTestBehavior.opaque,
              ),
              SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义组件库插件ag_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自定义组件库插件ag_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成并使用自定义组件库插件ag_widgets的一个基本示例。假设ag_widgets已经作为一个Flutter包发布在pub.dev上，或者你已经将其作为本地包包含在你的项目中。

1. 添加依赖

首先，你需要在你的pubspec.yaml文件中添加ag_widgets作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  ag_widgets: ^x.y.z  # 替换为实际的版本号

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

2. 导入库

在你的Dart文件中导入ag_widgets库：

import 'package:ag_widgets/ag_widgets.dart';

3. 使用自定义组件

假设ag_widgets包中包含一个名为CustomButton的自定义按钮组件，以下是如何在你的Flutter应用中使用它的示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AG Widgets Demo'),
      ),
      body: Center(
        child: CustomButton(
          onPressed: () {
            // 按钮点击回调
            print('CustomButton clicked!');
          },
          text: 'Click Me',
          color: Colors.green,
          textColor: Colors.white,
        ),
      ),
    );
  }
}

4. 假设CustomButton的实现

由于ag_widgets是自定义的，这里提供一个假设的CustomButton实现，以帮助你理解可能的实现方式。这不是你实际需要的代码，而是展示如何可能实现这样的组件：

// 在 ag_widgets 库中的某个 Dart 文件
import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final VoidCallback onPressed;
  final String text;
  final Color color;
  final Color textColor;

  const CustomButton({
    Key? key,
    required this.onPressed,
    required this.text,
    this.color = Colors.blue,
    this.textColor = Colors.white,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(color),
        foregroundColor: MaterialStateProperty.all(textColor),
      ),
      child: Text(text),
    );
  }
}

注意事项

  • 实际的ag_widgets库可能包含更多的组件和配置选项，你需要查阅该库的文档来了解所有可用的组件及其属性。
  • 确保你使用的ag_widgets版本与你的Flutter SDK版本兼容。
  • 如果ag_widgets是一个本地包（即未发布在pub.dev上），你需要通过local_package路径在pubspec.yaml中引用它。

希望这能帮助你在Flutter项目中成功集成并使用ag_widgets自定义组件库插件！

回到顶部