Flutter增强型列表插件cupertino_lists_enhanced的使用

Cupertion风格选项列表

cupertino_lists_enhanced 插件提供了一种iOS设置应用程序风格的选项列表。用户可以从一系列选项中选择一个或多个项目。它改进了来自标准库的 CupertinoListTile 和 CupertinoListSection 小部件，以更贴近iOS的行为。

功能特性

单选：从选项列表中选择一个项目。
多选：从选项列表中选择多个项目。
禁用某些选择。
在 前导（leading） 或 尾随（trailing） 边缘放置复选标记。
showCupertinoSingleSelectionPage 提供了一个全屏对话框来选择一个选项，类似于iOS设置应用。
额外定制化：
- 结合新样式的弯曲列表与原始样式的标题和页脚，如iOS设置应用。
- 使用 EnhancedCupertinoListSection、CupertinoMultiSelection 和 CupertinoSingleSelection 的 headerType 和 footerType 参数。
EnhancedCupertinoListTile 提供了更接近iOS行为的功能。

为什么使用 EnhancedCupertinoListTile？

Flutter的标准库提供的 CupertinoListTile 虽然很好，但在某些方面其行为与iOS不同。EnhancedCupertinoListTile 目标是作为一个改进版的 CupertinoListTile，提供了额外的功能，并更接近iOS的行为。

例如，在iOS中，当标题或副标题文本过长而无法在一行内显示时，它们会换行到多行。然而，Flutter标准库中的 CupertinoListTile 试图将文本放在一行内，导致长文本被截断。EnhancedCupertinoListTile 则通过将长文本换行到多行来更贴近iOS行为。

此外，EnhancedCupertinoListTile 更加注重标题和副标题的空间优先级，而不会因为附加信息过长而导致标题和副标题被截断。

文本换行

实际iOS行为	CupertinoListTile行为	EnhancedCupertinoListTile行为

文本优先级

实际iOS行为	CupertinoListTile行为	EnhancedCupertinoListTile行为

示例代码

import 'package:cupertino_lists_enhanced/list_section.dart';
import 'package:cupertino_lists_enhanced/multi_selection.dart';
import 'package:cupertino_lists_enhanced/route.dart';
import 'package:cupertino_lists_enhanced/selection_item.dart';
import 'package:cupertino_lists_enhanced/single_selection.dart';
import 'package:cupertino_lists_enhanced/widget_location.dart';
import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
      theme: CupertinoThemeData(
        scaffoldBackgroundColor: CupertinoColors.tertiarySystemGroupedBackground,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? _singleSelectionValue = "X";
  var _multiSelectionValues = <String?>{"A", "C"};
  String? _routeValue = "Wi-Fi";

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Cupertino Lists Enhanced'),
      ),
      child: SafeArea(
        child: Column(
          children: [
            CupertinoSingleSelection<String>(
              header: const Text("SINGLE SELECTION"),
              footer: const Text("Choose a single item from a list of options."),
              selected: _singleSelectionValue,
              onChanged: (newValue) {
                setState(() {
                  _singleSelectionValue = newValue!;
                });
              },
              children: [
                SelectionItem<String>(
                  title: const Text("Off"),
                  value: "X",
                ),
                SelectionItem<String>(
                  title: const Text("Wi-Fi"),
                  value: "Y",
                ),
                SelectionItem<String>(
                  title: const Text("Mobile Data"),
                  enabled: false,
                  value: "Z",
                ),
              ],
            ),
            CupertinoMultiSelection<String>(
              header: Text("Multi Selection".toUpperCase()),
              footer: const Text("Choose multiple items from a list of options."),
              selected: _multiSelectionValues,
              onChanged: (newValue) {
                setState(() {
                  _multiSelectionValues = newValue;
                });
              },
              checkMarkLocation: WidgetSelectionLocation.leading,
              children: [
                SelectionItem<String>(
                  title: const Text("Option one"),
                  subtitle: const Text("Disabled and selected"),
                  value: "A",
                  enabled: false,
                ),
                SelectionItem<String>(
                  title: const Text("Option two"),
                  subtitle: const Text("With subtitle!"),
                  value: "B",
                ),
                SelectionItem<String>(
                  title: const Text("Option three"),
                  value: "C",
                ),
                SelectionItem<String>(
                  title: const Text("Option four"),
                  value: "D",
                ),
                SelectionItem<String>(
                  title: const Text("Option five"),
                  subtitle: const Text("Disabled and not selected!"),
                  value: "E",
                  enabled: false,
                ),
              ],
            ),
            EnhancedCupertinoListSection.insetGrouped(
              header: const Text("FULL SCREEN DIALOG"),
              footer: const Text("Uses showCupertinoSingleSelectionPage to open a full page dialog to select an item."),
              headerType: CupertinoListSectionType.base,
              footerType: CupertinoListSectionType.base,
              children: [
                CupertinoListTile(
                  title: const Text("Background App Refresh"),
                  additionalInfo: Text(_routeValue ?? ""),
                  onTap: () async {
                    await showCupertinoSingleSelectionPage(
                      context: context,
                      title: const Text("Background App Refresh"),
                      initial: _routeValue,
                      onChanged: (newValue) {
                        setState(() {
                          _routeValue = newValue;
                        });
                      },
                      header: const Text("BACKGROUND APP REFRESH"),
                      footer: const Text("Background app refresh requires an internet connection."),
                      children: [
                        SelectionItem<String>(
                          title: const Text("Off"),
                          value: "Off",
                        ),
                        SelectionItem<String>(
                          title: const Text("Wi-Fi"),
                          value: "Wi-Fi",
                        ),
                        SelectionItem<String>(
                          title: const Text("Mobile Data"),
                          value: "Mobile Data",
                        ),
                      ],
                    );
                  },
                  trailing: const CupertinoListTileChevron(),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

此示例展示了如何使用 cupertino_lists_enhanced 插件创建一个包含单选、多选和全屏对话框选择功能的iOS风格列表。希望这些内容能帮助你更好地理解和使用这个插件！

更多关于Flutter增强型列表插件cupertino_lists_enhanced的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼•11 小时前

更多关于Flutter增强型列表插件cupertino_lists_enhanced的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter中使用cupertino_lists_enhanced插件的示例代码。这个插件提供了类似iOS风格的增强型列表组件，可以很方便地在Flutter应用中实现复杂的列表布局。

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

dependencies:
  flutter:
    sdk: flutter
  cupertino_lists_enhanced: ^x.y.z  # 请将x.y.z替换为当前最新版本号

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

接下来是一个示例代码，展示了如何使用cupertino_lists_enhanced来创建一个带有分组和导航功能的列表：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cupertino Lists Enhanced Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cupertino Lists Enhanced Demo'),
        ),
        body: CupertinoListsEnhancedDemo(),
      ),
    );
  }
}

class CupertinoListsEnhancedDemo extends StatefulWidget {
  @override
  _CupertinoListsEnhancedDemoState createState() => _CupertinoListsEnhancedDemoState();
}

class _CupertinoListsEnhancedDemoState extends State<CupertinoListsEnhancedDemo> {
  final List<CupertinoListSection> sections = [
    CupertinoListSection(
      header: Text('Section 1'),
      footer: Text('Footer for Section 1'),
      rows: [
        CupertinoListTile(
          title: Text('Row 1'),
          trailing: Icon(Icons.arrow_forward),
          onTap: () {
            // Handle row tap
            print('Row 1 tapped');
          },
        ),
        CupertinoListTile(
          title: Text('Row 2'),
          trailing: Icon(Icons.arrow_forward),
          onTap: () {
            // Handle row tap
            print('Row 2 tapped');
          },
        ),
      ],
    ),
    CupertinoListSection(
      header: Text('Section 2'),
      footer: Text('Footer for Section 2'),
      rows: [
        CupertinoListTile(
          title: Text('Row 1'),
          trailing: Icon(Icons.arrow_forward),
          onTap: () {
            // Handle row tap
            print('Row 1 in Section 2 tapped');
          },
        ),
        CupertinoListTile(
          title: Text('Row 2'),
          trailing: Icon(Icons.arrow_forward),
          onTap: () {
            // Handle row tap
            print('Row 2 in Section 2 tapped');
          },
        ),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return CupertinoList(
      sections: sections,
    );
  }
}

在这个示例中，我们创建了一个包含两个部分的列表。每个部分包含一个标题、一个页脚以及两个列表项。每个列表项都是一个CupertinoListTile，并且点击时会打印出相应的信息。

你可以根据需要进一步自定义列表项的布局和样式，例如添加副标题、图标、分隔线等。cupertino_lists_enhanced插件提供了丰富的API来支持这些自定义需求。

希望这个示例对你有所帮助！