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

Posted 2023-02-23

【中文标题】如何编写可维护的 UI 屏幕？

【英文标题】：how to write maintainable UI Screen?

【发布时间】：2019-12-06 12:52:36

【问题描述】：

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

我的代码好不好？

【问题讨论】：

也许看看Atomic Design？

【参考方案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，这将增加你的代码的可读性。