Question

我有一个页面，其中包含多个部分，每个部分都包含标题和文本列表。我希望整个系列作为一个系列统一滚动，并且想知道如何最好地打破这种逻辑。想象一下以下小部件树：

ListView(
  children: <Widget>[
    Text('Section 1 Header'),
    Text('Section 1 List Item 1'),
    Text('Section 1 List Item 2'),
    Text('Section 2 Header'),
    ...
  ]
)

就可以轻松构建的辅助函数而言，类似以下内容将很不错：

ListView(
  children: <Widget>[
    Text('Section 1 Header'),
    _buildSection1ListItems(),
    Text('Section 2 Header'),
  ]
)

_buildSection1ListItems()如下所示：

List<Widget> _buildSection1ListItems() {
  return [
    Text('Section 1 List Item 1'),
    Text('Section 1 List Item 2'),
  ];
}

并非如此：

Widget _buildSection1ListItems() {
  return Expanded(
    child: Column(
      children: <Widget>[
        Text('Section 1 List Item 1'),
        Text('Section 1 List Item 2'),
      ]
    )
  );
}

到目前为止，我只想出了显而易见的第二种解决方案，但是它引入了许多琐碎的小部件，这些小部件纯粹是受业务逻辑重构细节的影响，而不是实际的，理想的显示内容的小部件树。

在Flutter中有执行此操作的模式吗？

Answer 1

您可以从部分函数返回数组，然后展平整个列表。 How to flatten an array?

Answer 2

在Dart 2.2.2或更高版本中，您可以使用传播运算符：

ListView(
  children: <Widget>[
    Text('Section 1 Header'),
    ..._buildSection1ListItems(),
    Text('Section 2 Header'),
  ]
)

Answer 3

是的，有一种模式，您可以构建模型类。

创建一个新文件post_model.dart

import 'package:flutter/material.dart';

class PostModel {
Widget sectionHeader;
List<Widget> widgetList;

PostModel(Widget this.sectionHeader, List<Widget> this.widgetList);
}

您将使用ListView.builder显示PostModels列表。

body: new ListView.builder
  (
    itemCount: postModelList.length,
    itemBuilder: (BuildContext ctxt, int index) {
     return ....
    }
  )

详细了解如何使用listView.Builder here。

P.S。明智的方法是将帖子编码为JSON，然后使用json.decode，here是在项目中如何使用json.decode的示例。

如何在Flutter中返回部分小部件列表

3 个答案: