Flutter 中如何优雅的封装 Widget？

举个栗子，封装一个 Text Widget 。

方式一

优点：

不用担心为了自定义某个预设样式，而导致所有预设样式丢失。

缺点：

这里只是暴露了 Text 控件的几个属性，实际开发中一个 Widget 可能需要暴露很多属性，后面扩展下来，属性列表可能会拉的很长。在这里极限情况就要暴露 Text 控件的所有属性给外界。

class TextWidget extends StatelessWidget {
  final String text;
  final Color? color;
  final double? fontSize;
  final FontWeight? fontWeight;

  const TextWidget({
    Key? key,
    required this.text,
    this.color = Colors.black,
    this.fontSize = 16,
    this.fontWeight = FontWeight.normal,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(
        color: color,
        fontSize: fontSize,
        fontWeight: fontWeight,
      ),
    );
  }
}

方式二

优点：

不用暴露太多属性，直接暴露一个 textStyle 属性，需要用到 text 的什么属性，使用者自己传入 textStyle 即可。

缺点：

一旦 Widget 使用者，需要传入 textStyle 自定义部分样式，会丢失预设的 textStyle 所有默认样式，所有样式都需要重新传，对于只改其中单个或少数几个样式来说，很不方便。

这里预设了颜色、字号、字重这三个样式属性，使用者如果仅仅需要修改颜色，那在将自定义 color 传入 textStyle 的同时，还要传入字号、字重这俩属性默认的值。

这里预设样式比较少还好。如果预设样式列表特别长，有十几个甚至更多属性，为了自定义其中一个属性的样式，需要重新传所有样式，就很难受很不友好。

class TextWidget extends StatelessWidget {
  final String text;
  final TextStyle textStyle;

  const TextWidget({
    Key? key,
    required this.text,
    this.textStyle = const TextStyle(
      color: Colors.black,
      fontSize: 16,
      fontWeight: FontWeight.normal,
    ),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(text, style: textStyle);
  }
}

Trello

2022-06-11 20:03:54 +08:00

Flutter 中有没有哪种方式，能兼容上述两种方式的优点？诸如像 RN 中封装组件那样，就很优雅简洁。

方便扩展，不用传入多个样式属性，一个 style 即可。

同时也不用担心预设样式丢失，直接使用扩展运算符增量覆盖即可。

以下是 RN 写法。

interface Props {
text: String,
textStyle?: TextStyle,
}

class TextComponent extends React.Component<Props> {
render() {
const { text, textStyle } = this.props;

return (
<Text
style={{
color: '#000',
fontSize: 16,
fontWeight: 'normal',
...textStyle
}}
>
{text}
</Text>
)
}
}

Trello

2022-06-11 21:22:35 +08:00

@shetz163 哇，那岂不是得用一个 widget 就得写一个继承类来实现合并，这也太累了呀。而且写的这个继承类还不能通用，因为不同场景下预设值不一样，比如 EdgeInsets 我写了个继承类，里面属性赋上某个场景下预设的默认边距，别的场景这个 EdgeInsets 的边距默认值又变了，那还得重写一个关于 EdgeInsets 的继承类，或者在原来写的继承类里加判断或其他命名构造函数做场景区分（这些常用的 widget 场景太多，一个继承类根本维护不下去的）。吐了呀，要崩溃。。。太反人类吧。