Flutter自定义控件功能扩展插件widget_modifier的使用

A collection of built-in flutter widget modifiers, which flatten the widget tree and make it easier to read.

Credit: 原始想法和widget_modifier的基础代码是基于@remi_rousselet的nested插件修改而成。

问题

AspectRatio(
  aspectRatio: 16 / 8,
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 20),
    child: DecoratedBox(
      decoration: BoxDecoration(
        color: const Color(0xFFe1e4e3),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Row(),
      ),
    ),
  ),
)

这是一个典型的Flutter小部件。由于有四个嵌套的小部件，代码阅读起来非常困难。你需要在Padding、AspectRatio、DecoratedBox和Padding之间来回跳转才能看到实际的子小部件。这种过程既不必要又浪费脑力。

当然，在现实世界中没有人会这样做。相反，我们会使用一个友好的家伙——Container。上述小部件可以变为以下形式：

AspectRatio(
  aspectRatio: 16 / 8,
  child: Container(
    margin: const EdgeInsets.symmetric(horizontal: 20),
    decoration: BoxDecoration(
      color: const Color(0xFFe1e4e3),
      borderRadius: BorderRadius.circular(20),
    ),
    padding: const EdgeInsets.all(20),
    child: Row(),
  ),
)

但是，为什么我们仍然需要AspectRatio小部件？因为Container没有aspectRatio字段。这意味着Container无法提供所有你可能需要的配置。

为了解决这个问题，widget_modifier引入了一组新的API来“扁平化”你的小部件。

使用方法

widget_modifier提供了两种API风格：声明式和级联式。

声明式

声明式的修饰版本的上述示例小部件如下所示：

Modifier(
  modifiers: [
    AspectRatioModifier(
      aspectRatio: 16 / 8,
    ),
    PaddingModifier(
      padding: const EdgeInsets.symmetric(horizontal: 20),
    ),
    DecoratedBoxModifier(
      decoration: BoxDecoration(
        color: const Color(0xFFe1e4e3),
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    PaddingModifier(
      padding: const EdgeInsets.all(20),
    )
  ],
  child: Row(),
),

• modifiers: 一个List<SingleChildModifier>，基本上是一个典型的具有单个子小部件的小部件包装器。
• child: Modifier的子小部件。

声明式修饰器会从modifiers列表的底部元素开始应用到顶部元素。

优点与缺点

优点：

• 容易检测根child小部件的位置。
• 代码格式良好。
• 与编辑器代码折叠功能配合得很好。

缺点：

• 初学者可能会感到不直观。

级联式

级联式的修饰版本的上述示例小部件如下所示：

Row()
  .modified()
  .wrapWith(PaddingModifier(
    padding: const EdgeInsets.all(20),
  ))
  .wrapWith(DecoratedBoxModifier(
    decoration: BoxDecoration(
      color: const Color(0xFFe1e4e3),
      borderRadius: BorderRadius.circular(20),
    ),
  ))
  .wrapWith(PaddingModifier(
    padding: const EdgeInsets.symmetric(horizontal: 20),
  ))
  .wrapWith(AspectRatioModifier(
    aspectRatio: 16 / 8,
  ))

• modified(): 扩展方法将你的小部件转换为Modifier。
• wrapWith(): 将SingleChildModifier插入到modifiers列表的开头。
• wrapWithAll(): 将List<SingleChildModifier>插入到modifiers列表的开头。

级联修饰器会从顶部的wrapWith/wrapWithAll元素开始应用到底部。

优点与缺点

优点：

• 容易检测根child小部件的位置。
• 阅读起来更直观。

缺点：

• 代码格式有时看起来不够美观。

自定义修饰器

如果你想创建自定义修饰器，可以检查SingleChildStatelessModifier和SingleChildStatefulModifier的等效版本，它们分别是StatelessWidget和StatefulWidget。

注意事项

⚠️ 你需要覆盖buildWithChild而不是build方法。

⚠️ buildWithChild类似于build，但多了一个child参数，这是Modifier传递给SingleChildModifier的实际小部件。

⚠️ modifierKey是修饰器内部实际小部件的键。

单一状态无状态修饰器

class ConstrainedBoxModifier extends SingleChildStatelessModifier {
  ConstrainedBoxModifier({
    Key? key,
    Widget? child,
    super.modifierKey,
    required this.constraints,
  })  : assert(constraints.debugAssertIsValid()),
        super(key: key, child: child);

  final BoxConstraints constraints;

  [@override](/user/override)
  Widget buildWithChild(BuildContext context, Widget? child) {
    return ConstrainedBox(
      key: modifierKey,
      constraints: constraints,
      child: child,
    );
  }
}

单一状态有状态修饰器

你需要在SingleChildStatefulModifier的State类中实现SingleChildStateMixin混入。

class StatefulBuilderModifier extends SingleChildStatefulModifier {
  const StatefulBuilderModifier({
    super.key,
    super.modifierKey,
    required this.builder,
  });

  final SingleChildStatefulWidgetBuilder builder;

  [@override](/user/override)
  State<StatefulWidget> createState() => _StatefulBuilderModifierState();
}

class _StatefulBuilderModifierState extends State<StatefulBuilderModifier>
    with SingleChildStateMixin<StatefulBuilderModifier> {
  [@override](/user/override)
  Widget buildWithChild(BuildContext context, Widget child) {
    return widget.builder(context, setState, child);
  }
}

编辑器支持

你可以轻松地将现有的小部件转换为Modifier。更多信息请查看：

• VS Code 插件

示例代码

以下是完整的示例代码：

// ignore_for_file: unused_import
import 'package:example/benchmark/benchmark_view.dart';
import 'package:example/benchmark/complex_benchmark_view.dart';
import 'package:example/benchmark/modifier_complex_benchmark_view.dart';
import 'package:example/benchmark/modifier_benchmark_view.dart';
import 'package:example/homework_reminder_ui/home_view.dart';
import 'package:example/homework_reminder_ui/modifier_home_view.dart';
import 'package:flex_color_scheme/flex_color_scheme.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final theme = FlexColorScheme.light(
      scheme: FlexScheme.amber,
      useMaterial3: true,
    ).toTheme;
    final darkTheme = FlexColorScheme.dark(
      scheme: FlexScheme.amber,
      useMaterial3: true,
    ).toTheme;

    return MaterialApp(
      title: 'Homework tracker',
      theme: theme,
      darkTheme: darkTheme,
      themeMode: ThemeMode.light,
      home: const HomeView(),
      // home: const ModifierHomeView(),
      // home: const ModifierBenchmarkView(),
      // home: const BenchmarkView(),
      // home: const ModifierComplexBenchmarkView(),
      // home: const ComplexBenchmarkView(),
    );
  }
}