原文：https://medium.com/@morgenroth/flutter-tipps-tricks-for-keeping-your-ui-code-clean-d7b2528b1780
作者：Moritz Morgenroth
当使用 Flutters 声明式 UI 构建方式 的时候，作为开发人员，你对选择小部件范围、结构、嵌套等负有全部责任和控制权。 因此，在构建 UI 时维护干净易读的代码结构，有时会变得非常具有挑战性。
以下是我们过去几年在 Twigbit 开发过程中建立的一些规则、技巧和约定，以保持我们的 UI 代码有条理和可读性。 以后我会不断更新这篇文章。
1. 将通用的 Padding 移出 Columns、Rows 和 ListViews
只需稍作调整，就可以简单地对所有 Column、Row 和 ListView 子项应用通用的 Padding ，这将节省你在 children 数组中的大量代码重复。 可以使用一个简单的扩展，设置和覆盖通用 Padding ，这是很有帮助的，因为你需要避免某些上下文元素的默认 Padding ，例如 Expanded 。
class ExampleColumn extends StatelessWidget {
const ExampleColumn({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Magic Padding Header'),
Expanded(
child: Container(
color: Colors.green,
)).overridePadding(),
Text('Magic Padding Footer'),
].padded(const EdgeInsets.only(bottom: 8)),
);
}
}
这个代码是编译不过的，需要下面的 extension ：
extension WithPadding on List<Widget> {
List<Widget> padded(EdgeInsets padding) {
return this
.map((_) =>
_ is OverrideListPadding ? _ : Padding(padding: padding, child: _))
.toList();
}
}
class OverrideListPadding extends StatelessWidget {
final Widget child;
const OverrideListPadding({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return child;
}
}
extension WithOverrideListPadding on Widget {
Widget overridePadding() {
return OverrideListPadding(child: this);
}
}
不用多说，这种方式同样适用于任何 Flutter 元素，重要它是作为 children 放在 List<Widget> 数组里。
2.全局优先于局部：理解Flutter主题
当自定义小部件样式或行为时，请仔细查阅梳理 Flutter Theming API 的任何参数，你可能会发现使用 theme 中的这些参数可以达到相同的视觉效果。
Flutter 中的主题功能(Theme)非常强大，并带有许多智能默认值和 Material UI 预置约定，这些都使构建交互式、有价值的 UI/UX 变得更加容易。因此，通常在很多地方你并不想覆盖这些默认行为，因为复写这些已确立的默认约定会很危险。尤其在处理颜色和排版的时候更是如此。
一般来说，在设计风格和主题时，始终要从上到下考虑。如果有一个全局参数，通过配置调整可以达到你的目的，并且不会在其他地方破坏你的UI效果，那么应该优先使用这个全局参数。这同样适用于主题中的样式，如在设置 splashColor 之前设置 primaryColor，因为第二个可能会明智地适应第一个。
如果你真的需要在某些地方偏离主题，可以考虑将这些 widget 包裹在一个 Theme widget 中，并且使用全局 Theme 的 copyWith 来构建。应该避免在 widget 层级调整样式。如下：
floatingActionButton: Theme(
data: Theme.of(context).copyWith(splashColor: Colors.yellow),
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
),
3.检查 flutter widget library
当你考虑创建一个新的 widget 时，请先在Flutter library中查找是否可以配置某些现有的 widget 就可以实现你的目的。你会惊讶于Flutter内置的UI 元素的强大。
很多时候，我已经开始构建一个简单的 UI 元素以实现特定的功能效果，然后，我会突然间惊奇的发现，原来可以通过自定义现有 widget 的主题就可以实现同样的目的。你可能认为自己已经了解了所有，但 Flutter 社区会一次又一次的给你带来惊喜。
我对 Flutter 提供的开箱即用的功能感到非常的惊讶，这里有几个例子：具有良好交互体验的 Lists（Reorderable ListViews, Swipe Dismiss）， Chips, Tooltips, Drawers, Modals, Dialogs。
通常，FlutterDevs 在 Youtube 的频道 FlutterDevs Widget of the Week Youtube Channel 是一个很好的方式，让你保持了解新的和已经存在的 widgets，这些 widgets 应该珍藏在你开发常用的 widget 列表里。
希望这篇文章对你有所帮助，欢迎以你的方式进行评论，我总是非常强烈的想要扩展我的规则、技巧和约定集合，并获取新的想法 ：）感谢阅读。Flutter ❤️ 来自 Twigbit
网友评论