dart - 在小部件之间共享尺寸

Question

在 Flutter 中，我们可以使用 Themes 来共享颜色和字体样式。 https://flutter.io/docs/cookbook/design/themes

是否有我们可以以类似方式使用的现有最佳实践来共享值，例如边距、填充和宽度或高度？

最好是有助于遵守 Material 设计指南的内容。

Answer 1

定义自定义小部件

最简单也可能是最优雅的方法是定义自定义小部件，例如在内部使用具有正确尺寸的 RaisedButton 的 MyRaisedButton。

class MyRaisedButton extends StatelessWidget {
  MyRaisedButton({
    this.child,
    this.onPressed,
  });

  final Widget child;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      padding: ...,
      onPressed: onPressed,
      child: child
    );
  }
}

这在大多数情况下效果出奇地好。但是，如果您仍想保持小部件的灵 active (能够将大量自定义选项传递给构造函数)，您的整体小部件定义很快就会变得很长，因为您需要将所有选项转发给 RaisedButton。在这种情况下，在整个应用程序中实际共享值是有意义的。

实际上在整个应用程序中共享值(value)

当然，这种方法也是可以的。由于Flutter的开放性，我们可以直接看how the Theme is implemented并复制该代码以创建功能类似于 Theme 的自定义小部件。这是一个精简版:

@immutable
class MyThemeData {
  MyThemeData({
    this.myPadding,
    this.myColor,
    this.myString
  });

  final Padding myPadding;
  final Color myColor;
  final String myString;
}

class MyTheme extends StatelessWidget {
  MyTheme({
    Key key,
    @required this.data,
    @required this.child
  }) : super(key: key);

  final MyThemeData data;
  final Widget child;

  static MyThemeData of(BuildContext context) {
    return (context.ancestorWidgetOfExactType(MyTheme) as MyTheme)?.data;
  }

  @override
  Widget build(BuildContext context) => child;
}

现在，您可以将 MaterialApp 包装在 MyTheme 小部件中:

MyTheme(
  data: MyThemeData(
    myPadding: ...,
    myColor: ...,
    ...
  ),
  child: ... (here goes the MaterialApp)
)

然后在你的应用程序的任何地方，你可以写MyTheme.of(context).myPadding。
您可以根据需要调整 MyThemeData 类，存储您想要的任何内容。