flutter - 处理将数据传递给小部件以缩短 Flutter/dart 中复杂布局的最佳方法？

Question

背景
我在 flutter 的第 3 天，所以请耐心等待。我几乎一无所知
我的问题
我有一个 super 复杂的屏幕布局，包含层层嵌套的子级。
它变得完全不可读。到目前为止，许多项目都被标签到右侧，我不断地左右滚动，这使得此时几乎不可能进行编辑。
我的解决方案
我想把它全部分解成更小的部分，所以我决定制作更小的小部件:

Widget sectionPost = Container(
  padding: const EdgeInsets.all(5),
  child: Text(
    'Some text',
    softWrap: true,
  ),
);

然后我将其包含到我的主要布局中，如下所示:

Padding(
          padding: const EdgeInsets.symmetric(vertical:6.0,horizontal:10.0),
          child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(6.0),
              ),
              clipBehavior: Clip.antiAliasWithSaveLayer,
              elevation:0,
              child: sectionPost
          )
      )

我的问题
这似乎工作正常(尽管找到所有部分仍然很乏味)。
我的一些数据以变量的形式传递到我的主布局中。我的主要布局是一个 Class/StatelessWidget，其中的数据从 JSON 调用中输入。这些变量之一是 map

map['author'];

变量 map['author']在我的主布局类中工作得很好，但是当我尝试通过较小的小部件将其分解为较小的块时，无法识别该变量: Undefined name 'map' .
为了构建更大的布局，是否有一种简单的方法可以将这些变量传递给较小的小部件？
备择方案
如前所述，我正处于 flutter 的第 3 天，所以如果我完全错误地处理这个问题:我对处理具有不可读嵌套代码的大规模布局的潜在问题的不同方法全神贯注

Answer 1

您可以创建一个 StatelessWidget您收到作者姓名作为参数的位置:

class SectionPost extends StatelessWidget {
  final String name;

  const SectionPost(this.name);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5),
      child: Text(name, softWrap: true),
    );
  }
}

或者，如果您想访问除作者姓名之外的更多字段，您可以传递 map 本身。

class SectionPost extends StatelessWidget {
  final Map<String, dynamic> map;

  const SectionPost(this.map);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5),
      child: Text(map['author'], softWrap: true),
    );
  }
}

然后你可以在你的主代码中像这样使用它:

final Map<String, dynamic> map = /* ... */;

Padding(
  padding: const EdgeInsets.symmetric(vertical:6.0,horizontal:10.0),
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(6.0),
    ),
    clipBehavior: Clip.antiAliasWithSaveLayer,
    elevation:0,
    child: SectionPost(map['author']) // or SectionPost(map) if you chose the second approach
  ),
)