如何避免 flutter 中的重复代码？

Question

例如我有一个文件（first.dart）它有这样的代码：

  @override
Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    children: [
      Text('one'),
      Text('two'),
      Text('three'),
    ],
  ),
);
}

我有另一个文件 (second.dart) 与第一个文件有相似的代码，但有一点不同的代码，如下所示：

  @override
Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    children: [
      Text('one'),
      Text('two'),
      Text('four'),
    ],
  ),
);
}

而且我不想在两个地方使用相同的代码，也许将来需要在那里进行更改我不想同时转到两个文件并更改它们，而是在一个地方进行更改并且都得到更改，有什么想法吗？

Answer 1

构建小部件的“Flutter-Way”是通过实现子小部件并将不同的部分作为道具传递给它们。

在您的示例中，您可以将子数组作为 List 属性传递到带有脚手架和列的包装器 Widget 中。作为替代方案，您可以将文本直接作为 List 属性传递，然后将数组映射到您的文本小部件（如果它们始终具有相同的布局，只是文本不同）。

最后由您决定如何详细构建您的 Widget-Tree。总是尽量减少复杂性并只传递必要的道具。刚开始尝试，当你有更广泛的需求时，你仍然可以稍后优化代码。

如果我还不确定最终的结构，我通常会先将所有内容放入一个小部件，然后在事情开始重复时将内容外包给 Sub-Widget。

您还可以查阅 Flutter 最佳实践，进一步深入了解构建代码的主题。

Answer 2

所以，是的，这是一个大问题。如果您不知道如何为可以为每个屏幕自定义的中心文件制作中心文件，那么在很多情况下您必须编写重复的代码。

在这里，我正在解释你会

buttonWidget

的例子。

import 'package:flutter/material.dart';

class ButtonWidget extends StatefulHookConsumerWidget {
  final Widget buttonTitle;
  final Function onPressed;
  final ButtonStyle? style;
  const ButtonWidget(
      {required this.buttonTitle,
      required this.onPressed,
      this.style,
      Key? key})
      : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _ButtonWidgetState();
}

class _ButtonWidgetState extends ConsumerState<ButtonWidget> {
  @override
  Widget build(BuildContext context) {
    return 
      child: ElevatedButton(
        onPressed: () async {
          await widget.onPressed();
        },
        style: widget.style ?? ButtonStyle(),
        child: widget.buttonTitle,
    );
  }
}

在这里你怎么称呼它

ButtonWidget(
        buttonTitle: Text('My title),
        onPressed: () async {/*do something*/}
),

或

ButtonWidget(
            buttonTitle: Text('My title),
            onPressed: () async {/*do something*/},
            style: ButtonStyle(...),
    ),