Flutter卡片式设置界面插件kat_card_settings的使用

Flutter卡片式设置界面插件kat_card_settings的使用

Card Settings

A flutter package for building settings forms. This includes a library of pre-built form field widgets. It supports both Material and Cupertino style.

截图

This package consists of a CardSettings layout wrapper and a series of form field options including:

  • 文本字段

    • 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 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(
    ...
  ),
)

有关如何对对话框弹出窗口进行主题化的更多信息，请参阅 此处。

卡片样式

默认情况下，在 Material 模式下，内容位于 Card 或 Cards（如果分节）内。

卡式

如果您想要一个没有边框的扁平样式，则将 cardless 设置为 true。

无边框

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

这在 Cupertino 模式下没有效果，因为它根本没有卡片。

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

自定义

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 辅助小部件来简化此过程。它会默认使其子元素等宽分布，但您可以提供一个弹性值数组来控制相对大小。

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

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

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

1 回复

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


kat_card_settings 是一个用于 Flutter 的插件，它可以帮助你快速创建一个卡片式的设置界面。这个插件提供了一种简洁的方式来展示和管理应用的设置项，类似于 Android 设置界面的布局。

安装

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

dependencies:
  flutter:
    sdk: flutter
  kat_card_settings: ^0.1.0  # 请使用最新版本

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

基本用法

以下是一个简单的例子，展示如何使用 kat_card_settings 创建一个卡片式的设置界面：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kat Card Settings Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SettingsScreen(),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: KatCardSettings(
        children: [
          CardSettingsSection(
            header: CardSettingsHeader(
              label: 'General',
            ),
            children: <Widget>[
              CardSettingsSwitch(
                label: 'Enable Notifications',
                initialValue: true,
                onChanged: (value) {
                  print('Notifications enabled: $value');
                },
              ),
              CardSettingsTextField(
                label: 'Username',
                initialValue: 'JohnDoe',
                onChanged: (value) {
                  print('Username changed to: $value');
                },
              ),
              CardSettingsSlider(
                label: 'Volume',
                min: 0,
                max: 100,
                initialValue: 50,
                onChanged: (value) {
                  print('Volume changed to: $value');
                },
              ),
            ],
          ),
          CardSettingsSection(
            header: CardSettingsHeader(
              label: 'Account',
            ),
            children: <Widget>[
              CardSettingsButton(
                label: 'Change Password',
                onPressed: () {
                  print('Change Password pressed');
                },
              ),
              CardSettingsButton(
                label: 'Logout',
                onPressed: () {
                  print('Logout pressed');
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}
回到顶部