如何在Flutter中正确重用小部件样式？

Question

我来自像angular、react和vue这样的前端webframeworks，我很难找到编写可重用小部件样式的最佳方法。让我用一个例子来演示这个问题。

假设我们有这个小部件：

Container(
  width: 25,
  height: 10,
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    border: Border.all(
      color: Colors.black,
      width: 8.0,
      ),
    ),
  child: /* some custom widget */,
);

现在让我们假设我想让容器属性像width、height等可以通过参数改变。如果没有传递属性的某个参数，则应该使用其默认值，如下所示：

class CustomWidget extends StatelessWidget {
  final double width;
  final double height;
  final BoxDecoration decoration;

  const CustomWidget ({
    Key key,
    this.width = 25,
    this.height = 10,
    this.decoration = /* default decoration */
    /* possibly even more properties */
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      decoration: decoration,
      child: /* some custom widget */
  }
}

Answer 1

Flutter样式的行为类似于Vue范围内的styled/React“styled-component”或React本地：

在这些场景中没有“全局风格”。取而代之的是，您使用组合来获得所需的结果。

从某种意义上说，每个“CSS类”都有一个StatelessWidget，而不是一个带有许多参数的大StatelessWidget。

null

RedBackground(
  child: Text('hello world'),
)

RedBackground(
  child: MyBorder(
    child: Text('hello world'),
  ),
)