Flutter卡片设置插件orbit_card_settings的使用

Flutter卡片设置插件orbit_card_settings的使用

卡片设置

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

简单示例

所有字段都与标准 Flutter 表单小部件兼容。只需将 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(
  ...
),

完整的演示示例可以在此处查看：示例。

主题

orbit_card_settings 的样式可以设置为 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 模式下，内容位于卡片或卡片（如果分段）内。

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% 宽度
    ),
  ],
);

自定义字段

CardSettingsField 是所有其他字段的基础，可用于构建库之外的独特字段。其目的是通过一致的装饰来管理布局。创建自定义字段的最佳方法是从 FormField<T> 继承，这将管理你的字段的状态。最干净的例子是 CardSettingsSwitch 小部件。你所要做的就是在 content 属性中提供自定义小部件。

自定义小部件

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

class CardSettingsHeader extends StatelessWidget implements CardSettingsWidget {
  ...
}

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

1 回复

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


orbit_card_settings 是一个用于 Flutter 的插件，它提供了一种简单的方式来创建漂亮的卡片式设置界面。这个插件可以帮助你快速构建设置页面，通常用于应用程序的配置、用户偏好设置等场景。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  orbit_card_settings: ^0.1.0  # 请检查最新版本

然后运行 flutter pub get 来安装插件。

使用插件

orbit_card_settings 提供了多种类型的设置项，如开关、滑块、文本输入等。以下是一个简单的示例，展示如何使用这个插件来创建一个设置页面。

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

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

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

class SettingsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: SingleChildScrollView(
        child: OrbitCardSettings(
          children: [
            OrbitCardSettingsSection(
              header: 'General Settings',
              items: [
                OrbitSwitchSetting(
                  label: 'Enable Notifications',
                  initialValue: true,
                  onChanged: (value) {
                    print('Notifications enabled: $value');
                  },
                ),
                OrbitSliderSetting(
                  label: 'Volume',
                  min: 0,
                  max: 100,
                  initialValue: 50,
                  onChanged: (value) {
                    print('Volume set to: $value');
                  },
                ),
              ],
            ),
            OrbitCardSettingsSection(
              header: 'Account Settings',
              items: [
                OrbitTextSetting(
                  label: 'Username',
                  initialValue: 'user123',
                  onChanged: (value) {
                    print('Username changed to: $value');
                  },
                ),
                OrbitPasswordSetting(
                  label: 'Password',
                  onChanged: (value) {
                    print('Password changed to: $value');
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部