Flutter自定义组件插件 backstreets_widgets 的使用

backstreets_widgets 是一个包含作者在自己项目中发现有用的自定义小部件的库。本文将介绍如何使用这个库中的部分组件，并提供一个完整的示例demo。

描述

该库包含了作者在其个人项目中频繁使用的各种小部件，上传此库的目的在于减少文件复制和粘贴的工作量。

包内容

小部件（Widgets）

这些小部件通常应放置在 Scaffold 小部件内使用：

• Cancel: 捕获Esc键以执行特定操作，默认情况下会调用 context.pop()。
• CenterText: 包含 Text 并将其包裹在 Center 和 Focus 小部件中。
• DoubleListTile: 显示双精度浮点数的列表项，支持通过快捷键修改值。
• GetText: 获取文本的简单回调小部件。
• IntListTile: 类似于 DoubleListTile，但处理整数值。
• KeyboardShortcuts: 显示一系列键盘快捷方式的小部件。
• WithKeyboardShortcuts: 当按下某个键时显示快捷方式列表的小部件。
• PushWidgetListTile: 点击时推送新小部件的列表项。
• SearchableListView: 可搜索的列表视图，顶部有一个 TextFormField，支持使用快捷键导航列表。
• TextListTile: 显示文本并允许编辑的列表项。

屏幕（Screens）

这些是根部为 Scaffold 的小部件：

• SelectEnum: 专门用于枚举选择的 SelectItem 小部件。
• SelectItem: 允许从可搜索列表中选择单个项目的 SearchableListView。
• SimpleScaffold: 简化的 Scaffold 语法。
• TabbedScaffold: 底部或顶部带有多个标签页的 Scaffold。

示例代码

下面是一个完整的Flutter应用程序示例，展示了如何使用 backstreets_widgets 中的部分组件：

import 'package:backstreets_widgets/screens.dart';
import 'package:backstreets_widgets/shortcuts.dart';
import 'package:backstreets_widgets/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/// 衣物尺寸枚举
enum ClothingSize {
  s('Small'),
  m('Medium'),
  l('Large'),
  xl('Extra Large');

  final String label;
  const ClothingSize(this.label);
}

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EnsureSemantics(
      child: MaterialApp(
        title: 'backstreets_widgets Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  ClothingSize? _clothingSize;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Cancel(
      onCancel: () => setState(() => _counter = 0),
      child: SimpleScaffold(
        title: 'Demo',
        body: Center(
          child: ListView(
            shrinkWrap: true,
            children: [
              PerformableActionsListTile(
                actions: [
                  PerformableAction(
                    name: 'Increase counter',
                    activator: CrossPlatformSingleActivator(LogicalKeyboardKey.arrowUp),
                    invoke: () => setState(() => _counter++),
                  ),
                  PerformableAction(
                    name: 'Decrease counter',
                    activator: CrossPlatformSingleActivator(LogicalKeyboardKey.arrowDown),
                    invoke: () => setState(() => _counter--),
                  ),
                  PerformableAction(
                    name: 'Reset counter',
                    activator: const SingleActivator(LogicalKeyboardKey.escape),
                    invoke: () => setState(() => _counter = 0),
                    checked: _counter == 0,
                  ),
                ],
                title: const Text('Counter'),
                subtitle: Text('$_counter'),
                autofocus: true,
                onTap: () => setState(() => _counter = 10),
              ),
              EnumListTile(
                title: 'Clothing size',
                values: ClothingSize.values,
                onChanged: (value) => setState(() => _clothingSize = value),
                emptyValue: "Don't care",
                value: _clothingSize,
              ),
            ],
          ),
        ),
      ),
    );
  }
}