Flutter数字组件插件digit_components的使用

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

Flutter数字组件插件digit_components的使用

digit_components 是一个包含多种可重用UI组件的Flutter插件。这些组件可以帮助开发者快速构建用户界面，并确保样式的一致性。以下是各个组件的使用方法及示例代码。

DigitActionDialog

DigitActionDialog 是一个带有多个动作按钮或小部件的自定义对话框。

// 使用示例
DigitActionDialog.show(
  context,
  widget: your_widget()
);

DigitCheckBox

DigitCheckBox 是一个单选框组件。

// 使用示例
DigitCheckbox(
  label: "your_label",
  value: boolean_value,
),

DigitDateFormPicker

DigitDateFormPicker 是一个带自定义标签头部的响应式日期选择器。

// 使用示例
DigitDateFormPicker(
  label: 'Date of Birth',
  padding: const EdgeInsets.only(top: 32.0),
  isRequired: true,
  cancelText: 'Cancel',
  fieldHintText: 'dd/mm/yyyy',
  confirmText: 'OK',
  icon: Icons.info_outline_rounded,
  toolTipMsg: 'Age should not be less than 18 years',
  formControlName: 'dob_key',
  autoValidation: AutovalidateMode.always,
  requiredMessage: 'Date of birth is required',
  validationMessages: {
    'required': (_) => 'Date of birth is required',
    'max': (_) => 'Age cannot be greater than 18 years'
  },
)

DigitDivider

DigitDivider 是一个简单的分隔线组件。

// 使用示例
DigitDivider()

DigitDropdown

DigitDropdown 是一个带有标签头部的自定义下拉组件。

// 使用示例
DigitDropdown<String>(
  value: state.selectedBoundaryMap.entries
    .firstWhereOrNull(
      (element) => element.key == label,
    )
    ?.value,
  label: label,
  menuItems: your_item_list,
  onChanged: (value) {
    if (value == null) return;
    // Any functions to perform on change or on select of the dropdown
  },
  valueMapper: (value) {
    return value.name ?? value.code ?? 'No Value';
  },
)

DigitIconButton

DigitIconButton 是一个带有自定义图标的按钮。

// 使用示例
DigitIconButton(
  icon: Icons.check_circle,
  iconText: 'delivered',
  iconTextColor: Colors.white,
  iconColor: Colors.orange,
)

DigitIntegerFormPicker

DigitIntegerFormPicker 是一个整数选择器组件，允许用户通过加减按钮选择任意数字。

// 使用示例
DigitIntegerFormPicker(
  form: form,
  minimum: 0,
  formControlName: _quantityDistributedKey,
  label: 'Number of members',
  incrementer: true,
),

DigitOutlineIconButton

DigitOutlineIconButton 是一个带有前置图标的轮廓按钮。

// 使用示例
DigitOutlineIconButton(
  icon: Icons.warning,
  label: 'Decline',
  onPressed: () => call_your_on_pressed_function(),
)

DigitReactiveDropdown

DigitReactiveDropdown 是一个响应式的下拉表单组件。

// 使用示例
DigitReactiveDropdown<String>(
  label: 'relationship',
  menuItems: relationship.map((e) => e.toString()).toList(),
  isRequired: true,
  formControlName: relationshipKey,
  valueMapper: (value) => t.translate('CORE_COMMON_$value'),
  onChanged: (value) {},
  validationMessages: {
    'required': (_) => t.translate(
      i18.wageSeeker.relationshipRequired,
    ),
  },
)

DigitTextFormField

DigitTextFormField 是一个响应式的文本输入框组件。

// 使用示例
DigitTextFormField(
  formControlName: fatherNameKey,
  isRequired: true,
  label: t.translate(i18.common.guardianName),
  inputFormatter: [
    FilteringTextInputFormatter.allow(RegExp("[A-Za-z ]"))
  ],
  validationMessages: {
    'required': (_) => t.translate(
      i18.wageSeeker.fatherNameRequired,
    ),
    'minLength': (_) => t.translate(
      i18.wageSeeker.minFatherNameCharacters,
    ),
    'maxLength': (_) => t.translate(
      i18.wageSeeker.maxFatherNameCharacters,
    ),
  },
)

DigitToast

DigitToast 用于显示基于用户操作完成后的提示信息。

// 使用示例
DigitToast.show(
  context,
  options: DigitToastOptions(
    message ?? 'Unable to login',
    true,
    theme,
  ),
);

DigitCard

DigitCard 是一个带有按下功能的卡片组件。

// 使用示例
DigitCard(
  child: Text('Card Details'),
  onPressed: null
)

DigitCheckboxTile

DigitCheckboxTile 是一个包含复选框的列表项。

// 使用示例
DigitCheckboxTile(
  margin: const EdgeInsets.only(top: 16),
  padding: const EdgeInsets.fromLTRB(0, 8, 8, 8),
  label: hint ?? 'Some',
  value: (control.value ?? false) as bool,
  onChanged: (value) => control.value = value,
)

DigitDialog

DigitDialog 是一个带有自定义标题、副标题和动作按钮的自定义对话框。

// 使用示例
() => DigitDialog.show(context,
  options: DigitDialogOptions(
    titleIcon: const Icon(
      Icons.warning,
      color: Colors.red,
    ),
    titleText: 'Warning',
    contentText: 'Are you sure to decline?',
    primaryAction: DigitDialogActions(
      label: 'Confirm',
      action: (BuildContext context) {
        // your_primary_action();
      },
    ),
    secondaryAction: DigitDialogActions(
      label: 'Cancel',
      action: (BuildContext context) =>
          // your_secondary_action(),
    )),
);

DigitDobPicker

DigitDobPicker 是一个增强版的 DigitDateFormPicker，包含一个额外的文本字段来显示年龄并进行验证。

// 使用示例
DigitDobPicker(
  datePickerFormControl: _dobKey,
  datePickerLabel: localizations.translate(
    i18.individualDetails.dobLabelText,
  ),
  ageFieldLabel: localizations.translate(
    i18.individualDetails.ageLabelText,
  ),
  separatorLabel: localizations.translate(
    i18.individualDetails.separatorLabelText,
  ),
),

DigitElevatedButton

DigitElevatedButton 是一个带有标签选项和按下功能的提升按钮。

// 使用示例
DigitElevatedButton(
  onPressed: () => your_on_Pressed_function(),
  child: Center(
    child: Text(
      'Manage wage seekers',
      style: Theme.of(context)
          .textTheme
          .titleMedium!
          .apply(color: Colors.white)),
  ),
);

DigitIconTile

DigitIconTile 是一个带有前置图标和按下功能的自定义列表项。

// 使用示例
DigitIconTile(
  title: 'View Profile',
  selected: context.router.currentPath.contains('orgProfile'),
  icon: Icons.perm_contact_cal_sharp,
  onPressed: () => your_on_pressed_function()
)

DigitInfoCard

DigitInfoCard 是一个自定义的信息卡片，带有图标、背景色、图标颜色、描述和标题。

// 使用示例
DigitInfoCard(
  icon: Icons.info,
  backgroundColor: theme.colorScheme.tertiaryContainer,
  iconColor: theme.colorScheme.surfaceTint,
  description: localizations
      .translate(i18.home.dataSyncInfoContent)
      .replaceAll('{}', count.toString()),
  title: localizations.translate(
    i18.home.dataSyncInfoLabel,
  ),
),

DigitOutlineButton

DigitOutlineButton 是一个基于DIGIT figma的轮廓按钮。

// 使用示例
DigitOutlineButton(
  label: localizations.translate(
    i18.memberCard.deliverDetailsUpdateLabel,
  ),
  onPressed: () => your_on_pressed_function(),
)

DigitReactiveTypeAhead

DigitReactiveTypeAhead 是一个自动完成组件，可以在用户输入时显示建议。

// 使用示例
DigitReactiveTypeAhead<T, T>(
  formControlName: formControlName,
  stringify: valueMapper,
  initialValue: initialValue,
  initialValueText: initialValueText,
  onSuggestionSelected: onSuggestionSelected,
  debounceDuration: const Duration(milliseconds: 100),
  suggestionsCallback: (pattern) => suggestionsCallback(
    menuItems,
    pattern,
  ),
  itemBuilder: (context, item) {
    return Padding(
      padding: const EdgeInsets.all(kPadding * 2),
      child: Text(
        valueMapper(item),
        style: Theme.of(context).textTheme.bodyLarge,
      ),
    );
  },
)

DigitSearchBar

DigitSearchBar 是一个基于DIGIT figma的搜索栏。

// 使用示例
DigitSearchBar(
  controller: searchController,
  hintText: localizations.translate(
    i18.searchBeneficiary.beneficiarySearchHintText,
  ),
  textCapitalization: TextCapitalization.words,
  onChanged: (value) => your_on_change_function()
),

DigitSearchDropdown

DigitSearchDropdown 是一个可搜索的下拉框，封装了 DigitReactiveTypeAhead 并具有自定义标签小部件。

// 使用示例
DigitSearchDropdown<T, T>(
  label: 'City',
  formControlName: formControlName,
  stringify: valueMapper,
  initialValue: initialValue,
  initialValueText: initialValueText,
  onSuggestionSelected: onSuggestionSelected,
  debounceDuration: const Duration(milliseconds: 100),
  suggestionsCallback: (pattern) => suggestionsCallback(
    menuItems,
    pattern,
  ),
  itemBuilder: (context, item) {
    return Padding(
      padding: const EdgeInsets.all(kPadding * 2),
      child: Text(
        valueMapper(item),
        style: Theme.of(context).textTheme.bodyLarge,
      ),
    );
  },
)

DigitSyncDialogContent

DigitSyncDialogContent 是一个同步对话框，可以添加自定义标签和对话类型。有三种类型的同步对话：

  • 进行中
  • 完成
  • 失败
// 使用示例
() => DigitSyncDialogContent.show(
  context,
  type: DigitSyncDialogType.complete,
  label: 'Data Synced',
  primaryAction: DigitDialogActions(
    label: 'Close',
    action: (act) {
      Navigator.pop(act);
    },
  ),
);

DigitTextField

DigitTextField 是一个类似于 DigitTextFormField 的文本字段组件，可以不包裹在反应式表单中使用。

// 使用示例
DigitTextField(
  readOnly: true,
  label: localizations.translate(
    i18.householdLocation.administrationAreaFormLabel,
  ),
  controller: TextEditingController(
    text: context.boundary.code,
  ),
),

LabeledField

LabeledField 是一个带有子小部件的标签小部件。如果任何字段需要在其顶部添加标签，则该小部件可以被此 LabeledField 包裹。

// 使用示例
LabeledField(
  label: '$label ${isRequired ? '*' : ''}',
  padding: padding,
  labelStyle: Theme.of(context).textTheme.bodyLarge,
  icon: icon,
  toolTipMsg: toolTipMsg,
  child: ReactiveDatePicker())

PoweredByDigit

PoweredByDigit 是一个通用的Digit页脚。

// 使用示例
PoweredByDigit(
  isWhiteLogo: true,
)

ScrollableContent

ScrollableContent 是一个滚动包装小部件。所有子小部件都可以包裹在一个单一的滚动卡内。

// 使用示例
ScrollableContent(
  header: Column(children: const [
    Back(),
    DigitCard(),
  ]),
  footer: PoweredByDigit()
)

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用digit_components插件的一个示例。digit_components是一个用于显示和操作数字的Flutter插件，假设它提供了一些自定义的数字显示组件。为了具体说明，我们将假设插件提供了DigitDisplay组件来显示数字。

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

dependencies:
  flutter:
    sdk: flutter
  digit_components: ^latest_version  # 替换为实际的最新版本号

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

接下来，在你的Flutter项目中，你可以像这样使用DigitDisplay组件：

import 'package:flutter/material.dart';
import 'package:digit_components/digit_components.dart';  // 假设这是插件的导入路径

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int displayedNumber = 12345;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Digit Components Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DigitDisplay(
              number: displayedNumber,
              style: TextStyle(fontSize: 48, color: Colors.black),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  displayedNumber += 1;
                });
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 导入依赖：我们导入了digit_components包。
  2. 设置主应用：创建了一个基本的Flutter应用。
  3. 创建主页：创建了一个包含DigitDisplay组件和一个按钮的主页。DigitDisplay组件用于显示一个数字，而按钮用于增加这个数字。
  4. 更新状态：当按钮被点击时，我们通过调用setState方法来更新显示的数字。

请注意，这个示例是基于假设digit_components插件提供了一个DigitDisplay组件。如果实际的digit_components插件的API不同，你需要根据插件的文档来调整代码。

为了查看digit_components插件的实际API和组件，你应该参考插件的官方文档或源代码。通常，插件的README文件或pub.dev页面会提供足够的信息和示例代码来帮助你开始使用。

回到顶部