有没有办法避免 Flutter 小部件嵌套？

Question

我打算尝试 Flutter，但我发现的 GitHub 上的所有示例都包含具有高嵌套级别的小部件的代码，这不利于可读性。例如，这个： https://github.com/smartherd/Flutter-Demos/blob/master/lib/screens/note_list.dart

我能以某种方式避免它吗？有更好的实践来改善我的开发者体验吗？

Answer 1

我认为使用 Flutter 并拥有良好的开发体验最重要的是拥有清晰的结构。您可以遵循很多结构，但 flutter 的工作方式是大量嵌套。例如，在更大的项目中，我遵循这个概念：

- [folder] lib
    - [folder] models
    - [folder] apis
    - [folder] bloc (or any other state management / business logic pattern)
    - [folder] pages
        - [folder] page 1
        - [folder] page 2
        - [folder] page 3
            - pageview.dart
            - widget 1.dart
            - widget 2.dart
            - widget 3.dart
    - [folder] widgets (every widget which is used appwide)
    - main.dart

我对此感觉很舒服。我为 api、模型、业务逻辑、页面提供了清晰的空间，并且由于您可以重构代码并从中创建小部件，因此我的页面比您在 github 示例中看到的要小。我还可以快速找到在我的应用程序中多个地方使用的小部件。

找到一个好的结构并创建很多小部件可以让你以后更容易理解你的代码。我当然只能为自己说话，对我来说很舒服。

Answer 2

需要注意的是，大多数地方，我们都会进行某种嵌套，无论是 HTML、Android XML 还是其他。因此，大多数地方都允许进行可管理的嵌套。

虽然我已经看到在您提供的示例中进行了一些不必要的嵌套。

例如

 void updateListView() {

        final Future<Database> dbFuture = databaseHelper.initializeDatabase();
        dbFuture.then((database) {

            Future<List<Note>> noteListFuture = databaseHelper.getNoteList();
            noteListFuture.then((noteList) {
                setState(() {
                  this.noteList = noteList;
                  this.count = noteList.length;
                });
            });
        });
  }

在这里，我们可以使用

await

关键字来避免上述嵌套，如下所示

void updateListView() {
    // I don't know why is it even there but if it is required then it should be done in
    // below way which is commented out
    // final Database database = await databaseHelper.initializeDatabase(); 
    List<Note> noteList = await databaseHelper.getNoteList();
    setState(() {
      this.noteList = noteList;
      this.count = noteList.length;
    });
}

上面的代码应该经过正确的 linted 才能可读，哈哈

Answer 3

它是 Flutter 声明式工作方式的重要组成部分。所以不，恕我直言，你无法避免嵌套。如果可以的话，这将是一种解决方法，绕过颤振的基本概念。 只需按照预期的方式使用 flutter 即可。正如我所说：只是我的拙见

Answer 4

当然。您只需像这样取出树的任何较深层部分并将其放入单独的函数中即可。我的代码通常如下所示：

@override
Widget build(BuildContext context) {
  return Padding(
    padding: EdgeInsets.only(top: 8),
    child: buildContent(),
  );
}

然后：

Widget buildContent() {
  return Column(
    children: [
      buildFirst(),
      buildSecond(),
      buildThird(),
    ],
  );
}

等等。我非常愿意将一个或两个小部件放在一个单独的函数中，并在有意义的情况下给它一个有意义的名称。尽管我在一个大显示器上工作，而且我不太关心像 80 字符行这样的有害旧习惯，但如果没有非常充分的理由，我最多不会深入到四到五个级别，而且我不这样做记得最近遇到过任何此类原因。

如果你确实需要嵌套但又不想走到右边，你总是可以诉诸像 nested 包这样的技巧。