如何在Flutter中正确地重用窗口小部件样式?

时间:2019-09-14 20:53:37

标签: flutter dart flutter-layout

来自前端Webframeworks,例如angular,react和vue,我一直在努力寻找编写可重用的小部件样式的最佳方法。让我用一个例子来演示这个问题。

让我们说我们有这个小部件:

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

现在让我说我想使Containerwidthheight属性可以通过参数更改。如果未传递属性的某个参数,则应使用其默认值,如下所示:

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 */
  }
}

很显然,可能会有更多的特性,这会导致越来越多的样板。另外,如果该容器默认没有装饰,该怎么办?您是否应该始终通过自定义容器?还应考虑将Container嵌套在小部件树的下方。

必须有一个好的解决方案,我想不出来,可能是因为我对前端开发的经验使我的想法有偏差。在Web项目中,您只需传递组件/小部件自定义的CSS类以覆盖样式(例如,参数containerClasses)。您如何在颤动中正确地做到这一点?

编辑:本质上,我的问题是:在flutter中是否有一个等同于CSS类的东西?或者:什么是使自定义小部件样式完全可通过参数自定义的最佳方法?我觉得我必须用手书写每个属性。

在反应中,您具有所有html元素(例如divinput等)及其属性的接口(例如,对于input元素,您具有与{{ 1}},valueclass等),您可以使用它们来定义自定义组件/小部件可以传递的参数。

1 个答案:

答案 0 :(得分:1)

Flutter样式的行为与Vue范围内的样式/ React“样式组件”或一般的React Native相似:

在这些情况下,没有“全局样式”。相反,您可以使用合成来获得所需的结果。

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

例如,假设我们要将“红色背景+边框半径”划分为可重复使用的样式,那么通常会有两个小部件:

  • RedBackground
  • MyBorder

随后您将可以在其中独立使用它们:

render([1,1],[1,1],['first','second']);

或一起:

<div>
    <div>second</div>
<div>