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

时间:2019-07-29 08:00:24

标签: performance flutter dart

我想编写一个可读且漂亮的代码,以便任何人都能理解它,并且代码可以维护和扩展。

我的代码是好还是不好?

enter image description here

2 个答案:

答案 0 :(得分:1)

为较小的UI组件创建无状态窗口小部件,并使用这些可重复使用的UI窗口小部件组成较大的窗口小部件或页面。例如:

小部件文件夹:

  • custom_text.dart(可让我获得简单居中文本的小部件)。
  • custom_button.dart(自定义可重用组件)。

页面文件夹:

  • home_page.dart(一个包含带有custom_card脚手架的小部件 内部)
  • login_page.dart

这是一个示例

london-paris: 343.9231200909896
brighton-paris: 282.31635799139883

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

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(), 
      ),
    );
  }
}

答案 1 :(得分:0)

您可以维护用于保留窗口小部件的不同文件,并使用import语句在任何文件中使用它们。这也将使您的代码可重复使用。

要编写漂亮的代码,您必须正确地遵循缩进,还可以在代码中添加有用的注释,这将提高代码的可读性。