如何编写可维护的 UI 屏幕？答案

【问题标题】：how to write maintainable UI Screen?如何编写可维护的 UI 屏幕？
【发布时间】：2019-12-06 12:52:36
【问题描述】：

我想写一个可读的、漂亮的代码，让任何人都能理解，同时代码可以维护和扩展。

我的代码好不好？

【问题讨论】：

也许看看Atomic Design？

标签： performance flutter dart

【解决方案1】：

为较小的 UI 组件创建无状态小部件，并使用这些可重用的 UI 小部件组成更大的小部件或页面。例如：

小部件文件夹：

custom_text.dart（一个提供简单居中文本的小部件）。
custom_button.dart（自定义可重用组件）。

页面文件夹：

home_page.dart（一个包含带有 custom_card 的脚手架的小部件内）
login_page.dart

这是一个例子

void main() => runApp(HomePage ());

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: SimpleTextWidget(), 
      ),
    );
  }
}

这是一个可重用的小型组件，可在您的其他父窗口小部件中使用。

class SimpleTextWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
        child: Text('Hello'),);
      }
    }

【讨论】：

【解决方案2】：

您可以维护不同的文件来保存小部件，并使用导入语句在任何文件中使用它们。这也将使您的代码可重用。

为了写出漂亮的代码，你必须正确地遵循缩进，你也可以在代码中添加有用的 cmets，这将增加你的代码的可读性。

【讨论】：