Flutter设置屏幕插件gizmos_settings

Flutter设置屏幕插件gizmos_settings_screen的使用

gizmos_settings_screen 是一个用于显示设置屏幕（或类似屏幕）的Flutter包。在找到其他流行的设置屏幕包难以自定义外观和感觉之后，我构建了这个包。这个包采用了不同的方法，将功能与UI定制分离。这样你可以创建自定义皮肤以更好地融入你的现有应用。该包包含几个皮肤原型，包括Cupertino（浅色和深色模式）和Material（浅色和深色模式）。大多数情况下，你只需继承这些皮肤之一，更改颜色即可继续进行其他应用程序开发。

此包不依赖于任何特定的设置存储包。事实上，gizmos_settings_screen 可用于任何类型的通用单元格列表，只是设置是最明显的用例。示例应用使用了 shared_preferences，但我也在生产应用中使用了 flutter_secure_storage。

安装

要使用此包，请将其添加到你的 pubspec.yaml 文件中：

dependencies:
  gizmos_settings_screen: any

导入库

import 'package:gizmos_settings_screen/gizmos_settings_screen.dart';

使用

查看包含的示例应用以获取详细信息。对于基本使用，你需要使用其中一个提供的皮肤实例化一个 SkinDelegate，或者通过创建一个所提供的皮肤子类来实现。然后通过附加一个或多个配置了一个或多个 SettingsCell 子类的 SettingsSections 来自定义 SettingsScreen。提供的子类包括 DetailsSettingCell、SwitchSettingsCell、SliderSettingsCell 和 ButtonSettingsCell。这些应该能满足你的大部分基本需求，但创建额外的子类来处理应用程序特定选项也很容易。

示例代码

// 选择默认皮肤
SettingsSkinDelegate skinDelegate = !Platform.isIOS ? MaterialSettingsSkin() : CupertinoSettingsSkin();

// 返回配置好的 SettingsScreen 包含在带有分配委托的 SettingsSkin 中
return SettingsSkin(
  delegate: skinDelegate,
  child: SettingsScreen(
    sections: [
      SettingsSection(
        header: 'App Settings',
        footer: 'Your app preferences are set here',
        cells: [
          DetailsSettingsCell(
            title: 'Informational',
            subtitle: 'Can include simple cells',
            leadingWidget: Icon(
              Icons.star,
              color: Colors.blue,
            ),
          ),
          SwitchSettingsCell(
            title: 'Toggleable option',
            subtitle: 'Uses a switch to set something on or off',
            value: sampleBooleanSetting,
            onPressed: () {
              setState(() {
                sampleBooleanSetting = !sampleBooleanSetting;
              });
            },
            onChanged: (bool value) {
              setState(() {
                sampleBooleanSetting = value;
              });
            },
          ),
          SliderSettingsCell(
            title: 'Fractional option (i.e. Volume)',
            subtitle: 'Uses a slider to adjust a double',
            value: sampleDoubleSetting,
            onChanged: (value) {
              setState(() {
                sampleDoubleSetting = value;
              });
            },
          ),
          DetailsSettingsCell(
            title: 'Multiple choice option',
            value: preferences.currentOption.description,
            accessoryType: AccessoryType.Disclosure,
            onPressed: () async {
              // Your code goes here
            },
          ),
          ButtonSettingsCell(
            type: ButtonType.Normal,
            title: 'Check for updates',
            onPressed: () async {
              // Your code goes here
            },
          ),
        ],
      ),
    ],
  ),
);

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

phonegap100 1楼•3 天前

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

当然，以下是如何在Flutter项目中集成和使用gizmos_settings_screen插件的示例代码。这个插件允许你快速创建一个设置屏幕。

1. 添加依赖

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

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

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

2. 导入包

在你的Dart文件中导入gizmos_settings_screen包：

import 'package:gizmos_settings_screen/gizmos_settings_screen.dart';

3. 创建设置项

接下来，你需要创建一些设置项。这里是一个简单的示例，展示如何创建开关、滑块和文本字段设置项。

class MySettingsScreen extends StatefulWidget {
  @override
  _MySettingsScreenState createState() => _MySettingsScreenState();
}

class _MySettingsScreenState extends State<MySettingsScreen> {
  bool _isSwitchOn = false;
  double _sliderValue = 50.0;
  String _textFieldValue = 'Default Text';

  void _handleSwitchChanged(bool value) {
    setState(() {
      _isSwitchOn = value;
    });
  }

  void _handleSliderChanged(double value) {
    setState(() {
      _sliderValue = value;
    });
  }

  void _handleTextFieldChanged(String value) {
    setState(() {
      _textFieldValue = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SettingsScreen(
      title: 'My Settings',
      sections: [
        SettingsSection(
          title: 'Basic Settings',
          tiles: [
            SettingsTile(
              title: 'Switch Option',
              leading: Icon(Icons.switch_camera),
              switchValue: _isSwitchOn,
              onToggle: _handleSwitchChanged,
            ),
            SettingsTile.slider(
              title: 'Slider Option',
              leading: Icon(Icons.adjust),
              initialValue: _sliderValue,
              min: 0,
              max: 100,
              onChanged: _handleSliderChanged,
            ),
            SettingsTile.text(
              title: 'Text Field Option',
              leading: Icon(Icons.edit),
              initialValue: _textFieldValue,
              onChanged: _handleTextFieldChanged,
            ),
          ],
        ),
      ],
    );
  }
}

4. 使用设置屏幕

现在，你可以在你的应用中使用这个设置屏幕。例如，在main.dart文件中：

import 'package:flutter/material.dart';
import 'my_settings_screen.dart';  // 导入你创建的设置屏幕文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Settings Screen Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => MySettingsScreen()),
              );
            },
            child: Text('Open Settings'),
          ),
        ),
      ),
    );
  }
}

总结

以上代码展示了如何在Flutter项目中集成和使用gizmos_settings_screen插件来创建一个设置屏幕。你可以根据需要添加更多的设置项，并自定义每个设置项的外观和行为。希望这个示例对你有帮助！