Flutter价格展示插件fastyle_pricing的使用

Flutter价格展示插件fastyle_pricing的使用

fastyle_pricing 是一个用于 fastyle 库的价格展示小部件集。这些小部件可以帮助开发者轻松地创建美观且功能丰富的价格展示页面。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 中使用 fastyle_pricing 插件来创建一个简单的价格展示页面。

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:fastyle_core/fastyle_core.dart';
import 'package:go_router/go_router.dart';

// Project imports:
import './pages/plan_summary_cards.page.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 FastApp 来设置应用的基本配置
    return FastApp(
      routesForMediaType: (mediaType) => [
        GoRoute(
          path: '/',
          builder: (_, __) => const HomePage(),
        ),
      ],
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 FastSectionPage 来创建一个带有标题和内容的区域
    return FastSectionPage(
      titleText: 'Fastyle Pricing Demo',
      contentPadding: EdgeInsets.zero,
      child: FastNavigationListView(
        // 设置选择改变时的回调函数
        onSelectionChanged: (FastItem<dynamic> item) {
          if (item.value == 'summary') {
            // 导航到 PlanSummaryCardsPage 页面
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const PlanSummaryCardsPage()),
            );
          }
        },
        // 设置列表项
        items: const [
          FastItem(labelText: 'Plan Summary cards', value: 'summary'),
          FastItem(labelText: 'Plan Detail cards', value: 'detail'),
        ],
      ),
    );
  }
}

更多关于Flutter价格展示插件fastyle_pricing的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter价格展示插件fastyle_pricing的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


fastyle_pricing 是一个用于 Flutter 应用的价格展示插件。它可以帮助开发者快速集成和展示价格信息，通常用于电商、订阅服务等场景。以下是如何使用 fastyle_pricing 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 fastyle_pricing 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  fastyle_pricing: ^latest_version # 请替换为最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 fastyle_pricing 包。

import 'package:fastyle_pricing/fastyle_pricing.dart';

3. 使用 PriceDisplay 组件

fastyle_pricing 提供了一个 PriceDisplay 组件，用于展示价格。你可以通过传递不同的参数来自定义价格的显示方式。

PriceDisplay(
  price: 99.99,
  currency: 'USD',
  style: PriceDisplayStyle.large, // 可选的小型、中型或大型样式
  showDecimal: true, // 是否显示小数部分
  showCurrencySymbol: true, // 是否显示货币符号
)

4. 自定义样式

你可以通过设置 style 参数来调整价格的显示样式。PriceDisplayStyle 提供了多种预定义的样式，如 small、medium 和 large。

PriceDisplay(
  price: 99.99,
  currency: 'USD',
  style: PriceDisplayStyle.small, // 使用小型样式
  showDecimal: false, // 不显示小数部分
  showCurrencySymbol: false, // 不显示货币符号
)

5. 处理货币符号和格式

fastyle_pricing 还支持不同货币的显示格式。你可以根据应用的需求来选择是否显示货币符号，或者自定义货币的格式。

PriceDisplay(
  price: 99.99,
  currency: 'EUR',
  showCurrencySymbol: true, // 显示货币符号
  currencySymbolPosition: CurrencySymbolPosition.before, // 货币符号显示在价格前面
)

6. 处理折扣价格

如果你需要展示折扣价格，可以使用 discountPrice 参数。

PriceDisplay(
  price: 99.99,
  discountPrice: 79.99,
  currency: 'USD',
  style: PriceDisplayStyle.medium,
  showDecimal: true,
  showCurrencySymbol: true,
)

7. 其他自定义

fastyle_pricing 还支持其他自定义选项，如文本颜色、字体大小等。你可以通过传递 textStyle 或 discountTextStyle 来自定义价格的文本样式。

PriceDisplay(
  price: 99.99,
  currency: 'USD',
  style: PriceDisplayStyle.large,
  textStyle: TextStyle(
    color: Colors.red,
    fontSize: 24,
  ),
  discountTextStyle: TextStyle(
    color: Colors.grey,
    decoration: TextDecoration.lineThrough,
  ),
)

8. 完整示例

以下是一个完整的示例，展示了如何使用 fastyle_pricing 插件来显示价格和折扣价格。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Price Display Example')),
        body: Center(
          child: PriceDisplay(
            price: 99.99,
            discountPrice: 79.99,
            currency: 'USD',
            style: PriceDisplayStyle.large,
            showDecimal: true,
            showCurrencySymbol: true,
            textStyle: TextStyle(
              color: Colors.red,
              fontSize: 24,
            ),
            discountTextStyle: TextStyle(
              color: Colors.grey,
              decoration: TextDecoration.lineThrough,
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部