如何避免颤振中的重复代码?

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

The "构建小部件的方法是实现子部件，并将不同的部分作为道具传递给它们。

在您的示例中，您可以将子数组作为List属性传递给具有scaffold和列的包装器Widget。作为一种选择，你可以直接传递文本作为一个列表属性，然后映射数组到你的文本小部件，如果他们总是有相同的布局，只是不同的文本。

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

如果我还不确定最终的结构，我通常先把所有的东西放在一个小部件中，然后当事情开始重复时，再把内容外包给子小部件。

您还可以查找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(...),
),