Flutter卡片设置插件card_settings的使用

Flutter卡片设置插件card_settings的使用

card_settings 是一个用于构建设置表单的 Flutter 包。它包含了一系列预建的表单字段小部件，并支持 Material 和 Cupertino 风格。

简介

截图

该包包含 CardSettings 布局包装器以及一系列表单字段选项，包括：

  • 文本字段

    • CardSettingsText - 基本文本字段
    • CardSettingsParagraph - 多行文本字段带计数器
    • CardSettingsEmail - 用于电子邮件输入的文本字段
    • CardSettingsPassword - 用于密码输入的文本字段
    • CardSettingsPhone - 掩码电话输入字段（目前为美国风格）

  • 数字字段

    • CardSettingsDouble - 双精度数字字段
    • CardSettingsInt - 整数数字字段
    • CardSettingsCurrency - 货币输入字段
    • CardSettingsSwitch - 布尔状态字段

  • 选择器

    • CardSettingsListPicker - 任意选项列表选择器
    • CardSettingsNumberPicker - 给定范围内的数字选择器
    • CardSettingsRadioPicker - 单项选择器带有单选按钮
    • CardSettingsSelectionPicker - 带有可选图标的列表单选
    • CardSettingsCheckboxPicker - 多选列表选项
    • CardSettingsColorPicker - 三种颜色选择器：RGB、Material 和 Block
    • CardSettingsDatePicker - 日期选择器
    • CardSettingsTimePicker - 时间选择器
    • CardSettingsDateTimePicker - 日期和时间组合选择器
    • CardSettingsFilePicker - 从设备上传文件

  • 信息部分

    • CardSettingsHeader - 在表单部分之间放置头部
    • CardSettingsInstructions - 信息性只读文本

  • 动作

    • CardSettingsButton - 表单的动作按钮

所有字段都支持 validate、onChange、onSaved、autovalidate 和 visible。

该包还包括以下附加项目：

  • CardSettingsField - 基础布局小部件，可用于构建自定义字段
  • Converters - 一组辅助函数，用于将数据导入导出到字段

简单示例

所有字段都与标准 Flutter Form 小部件兼容。只需将 CardSettings 控件包裹在表单中，并像使用表单功能一样正常使用即可。

String title = "Spheria";
String author = "Cody Leet";
String url = "http://www.codyleet.com/spheria";

final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Form(
      key: _formKey,
      child: CardSettings(
        children: <CardSettingsSection>[
          CardSettingsSection(
            header: CardSettingsHeader(
              label: 'Favorite Book',
            ),
            children: <CardSettingsWidget>[
              CardSettingsText(
                label: 'Title',
                initialValue: title,
                validator: (value) {
                  if (value == null || value.isEmpty) return 'Title is required.';
                },
                onSaved: (value) => title = value,
              ),
              CardSettingsText(
                label: 'URL',
                initialValue: url,
                validator: (value) {
                  if (!value.startsWith('http:')) return 'Must be a valid website.';
                },
                onSaved: (value) => url = value,
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

如果您希望每个部分都有单独的卡片，则可以使用 .sectioned 构造函数：

child: CardSettings.sectioned(
  ...
),

完整的演示示例请参见 这里。

主题定制

小部件的样式可以是 Material 或 Cupertino。CardSettings 小部件有一个全局切换来更改样式：

return CardSettings(
  showMaterialonIOS: true, // 默认为 false
);

这同样存在于每个字段小部件上，以便您可以更精细地控制这一点。

如果您正在使用 Material 设计样式，则 MaterialApp 主题会生效。此示例展示了要设置哪些全局主题值以确定各种元素的外观。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Card Settings Example',
      home: new HomePage(),
      theme: ThemeData(
        primaryColor: Colors.teal, // 应用栏背景
        secondaryHeaderColor: Colors.indigo[400], // 卡片头部背景
        cardColor: Colors.white, // 卡片字段背景
        backgroundColor: Colors.indigo[100], // 应用背景颜色
        buttonColor: Colors.lightBlueAccent[100], // 按钮背景颜色
        textTheme: TextTheme(
          button: TextStyle(color: Colors.deepPurple[900]), // 按钮文字
          subtitle1: TextStyle(color: Colors.grey[800]), // 输入文字
          headline6: TextStyle(color: Colors.white), // 卡片头部文字
        ),
        primaryTextTheme: TextTheme(
          headline6: TextStyle(color: Colors.lightBlue[50]), // 应用头部文字
        ),
        inputDecorationTheme: InputDecorationTheme(
          labelStyle: TextStyle(color: Colors.indigo[400]), // 标签样式
        ),
      ),
    );
  }
}

或者，如果您只想为 CardSettings 层级应用不同的主题，可以将其包装在一个 Theme 小部件中：

Theme(
  data: Theme.of(context).copyWith(
    primaryTextTheme: TextTheme(
      headline6: TextStyle(color: Colors.lightBlue[50]), // 应用头部文字
    ),
    inputDecorationTheme: InputDecorationTheme(
      labelStyle: TextStyle(color: Colors.deepPurple), // 标签样式
    ),
  ),
  child: CardSettings(
    ...
  ),
)

请参阅 flutter_material_pickers 的文档 了解如何为对话框弹窗设置主题。

卡片样式

默认情况下，在 Material 模式下，内容在卡片或卡片（如果分段）中。

Carded

如果您希望仅具有无边框的平面样式，则可以将 cardless 设置为 false。

Cardless 
return CardSettings(
  cardless: true; // 默认为 false
);

这在 Cupertino 模式下不起作用，因为其本身没有卡片。

您还可以通过主题更改实际卡片样式，例如：

Custom 
cardTheme: CardTheme(
  shape: RoundedRectangleBorder(
    side: BorderSide(width: 2, color: Colors.orange),
    borderRadius: BorderRadius.circular(20),
  ),
),

全局属性

CardSettings 小部件实现了一些全局设置，所有子字段都可以继承。目前它仅支持标签定制。

标签

您可以使用四个属性控制标签的渲染方式：

CardSettings(
  labelAlign: TextAlign.right, // 更改标签对齐方式
  labelWidth: 120.0, // 更改标签部分的宽度
  labelSuffix: ':', // 添加一个可选标签在标签后面
  labelPadding: 10.0, // 控制标签和内容之间的间距
  contentAlign: TextAlign.left, // 输入小部件的对齐方式
  icon: Icon(Icons.person), // 在标签左侧添加一个可选图标
  requiredIndicator: Text('*', style: TextStyle(color: Colors.red)), // 在标签右侧添加一个可选指示符
)

labelAlign 和 contentAlign 属性也可以在每个字段上使用，因此您可以覆盖全局设置以针对个别字段。

CardSettingsText(
  label: 'Last Name',
  labelAlign: TextAlign.left,
  contentAlign: TextAlign.right,
)

标题

CardSettingsHeader 提供了设置颜色、高度和标签对齐度的属性。但是，如果您希望完全覆盖默认的标题样式并替换为自定义样式，可以使用 child 属性传递自己的小部件树：

header: CardSettingsHeader(
  child: Container(
    height: 80,
    child: Row(
      children: [
        Expanded(child: Divider(color: Colors.purple, thickness: 5)),
        Text('Custom Header', style: TextStyle(fontSize: 20)),
        Expanded(child: Divider(color: Colors.purple, thickness: 5)),
      ],
    ),
  ),
),

动态可见性

每个字段都实现了 visible 属性，您可以使用它根据其他字段的值控制可见性。在此示例中，切换字段控制文本字段的可见性：

bool _ateOut = false;

CardSettingsSwitch(
  label: 'Ate out?',
  initialValue: _ateOut,
  onChanged: (value) => setState(() => _ateOut = value),
),

CardSettingsText(
  label: 'Restaurant',
  visible: _ateOut,
),

掩码

CardSettingsText 小部件有一个 inputMask 属性，强制输入文本符合给定模式。这基于 flutter_masked_text 包，并且掩码格式化使用以下字符：

  • 0: 接受数字
  • A: 接受字母
  • @: 接受数字和字母
  • *: 接受任何字符

例如，电话号码可以是 (000) 000-0000。

注意：CardSettingsPhone 是一个方便的小部件，已经配置为使用此模式。

注意：flutter_masked_text 是一个控制器，因此您不能同时使用 inputMask 和自定义控制器。这可能会在未来得到解决。

方向

这套工具允许方向切换。为了配置这一点，根据 MediaQuery 提供的方向构建不同的布局。

您可能希望在每个布局中拥有不同的字段或不同的字段顺序。为了使 Flutter 不会在这种情况下跟踪状态，您必须为每个单独的字段提供唯一的状态键，并在每个布局中使用相同的键。

@override
Widget build(BuildContext context) {
  final GlobalKey<FormState> _emailKey = GlobalKey<FormState>();
  var orientation = MediaQuery.of(context).orientation;

  return Form(
    key: _formKey,
    child: (orientation == Orientation.portraitUp)
        ? CardSettings(children: <Widget>[
              // 竖屏布局
              CardSettingsEmail(key: _emailKey)
            ])
        : CardSettings(children: <Widget>[
              // 横屏布局
              CardSettingsEmail(key: _emailKey)
            ]);
  );
}

在横屏方向下，您可以在一行中有多字段。通常这需要使用容器小部件来提供行内的布局。相反，您可以使用 CardFieldLayout 辅助小部件来简化这一过程。默认情况下，它使其子元素等宽分布，但您可以提供一个 flex 值数组来控制相对大小。

// 等宽分布示例
CardSettings(
  children: <Widget>[
    CardFieldLayout(children: <Widget>[
      CardSettingsEmail(),
      CardSettingsPassword(),
    ]),
  ],
);

// 相对宽度示例
CardSettings(
  children: <Widget>[
    CardFieldLayout_FractionallySpaced(
      children: <Widget>[
        CardSettingsEmail(),
        CardSettingsPassword(),
      ],
      flexValues: [2, 1], // 66% 和 33% 宽度
    ),
  ],
);

自定义字段

CardSettingsField 是所有其他字段的基础，并且可以用来自定义字段，超出此库的范围。它的目的是通过一致的装饰来管理布局。创建自定义字段的最佳方法是继承 FormField<T>，这将管理您的字段的状态。最干净的例子是 CardSettingsSwitch 小部件。您所要做的就是提供自定义小部件到 content 属性。

自定义小部件

如果您希望提供一个不是字段类型布局的自定义小部件，则需要实现 CardSettingsWidget 接口，如下所示：

class CardSettingsHeader extends StatelessWidget implements CardSettingsWidget {
  ...
}

更多关于Flutter卡片设置插件card_settings的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter卡片设置插件card_settings的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，card_settings 是一个用于 Flutter 的插件，它提供了一种简单的方法来创建设置卡片。这些卡片通常用于应用程序的设置页面，允许用户更改配置选项。下面是一个简单的示例，展示了如何使用 card_settings 插件来创建一个包含多个设置选项的页面。

首先，确保你已经在 pubspec.yaml 文件中添加了 card_settings 依赖：

dependencies:
  flutter:
    sdk: flutter
  card_settings: ^latest_version  # 请替换为最新的版本号

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

接下来，你可以创建一个包含多个设置选项的 Flutter 页面。以下是一个完整的示例代码：

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

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

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

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  String _username = '';
  bool _enableNotifications = true;
  int _notificationFrequency = 1; // 1: Daily, 2: Weekly, 3: Monthly

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            CardSettingsTextForm(
              context: context,
              label: 'Username',
              initialValue: _username,
              onChanged: (value) {
                setState(() {
                  _username = value;
                });
              },
            ),
            CardSettingsSwitch(
              context: context,
              label: 'Enable Notifications',
              initialValue: _enableNotifications,
              onChanged: (value) {
                setState(() {
                  _enableNotifications = value;
                });
              },
            ),
            CardSettingsDropdownMenu(
              context: context,
              label: 'Notification Frequency',
              initialValue: _notificationFrequency.toString(),
              values: ['Daily', 'Weekly', 'Monthly'],
              onChanged: (value) {
                setState(() {
                  _notificationFrequency = int.parse(value);
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个 SettingsPage，它包含了三个设置选项：

  1. CardSettingsTextForm：用于输入用户名。
  2. CardSettingsSwitch：用于启用或禁用通知。
  3. CardSettingsDropdownMenu：用于选择通知频率（每日、每周、每月）。

每个设置选项都绑定到相应的状态变量，并且当值发生变化时，状态变量会更新。

这个示例展示了如何使用 card_settings 插件来创建美观且用户友好的设置卡片。你可以根据需要添加更多的设置选项，并自定义它们的样式和行为。

回到顶部