Flutter 布局：在网格上方添加文本

Question

在我的程序中，我重用了 flutter_gallery 演示中完成的部分内容：https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/pesto_demo.dart

更准确地说，我正在重用创建 RecipeGridPage 的方法。它工作正常，但我现在想在网格上方添加一个文本小部件。我用过这样的东西：

Column(
  children: <Widget>[
    Text('BlaBlaBla'),
    RecipeGridPage(recipes: kPestoRecipes),
  ],
)

但我收到以下错误：“ RenderCustomMultiChildLayoutBox 对象在布局期间被赋予无限大小”。

我应该在哪个小部件中包装 RecipeGridPage 以便能够在网格上方添加单个文本？

谢谢！

Answer 1

尝试使用Stack，只需根据您的需要更改填充：

    Stack(
            children: <Widget>[
              Text('BlaBlaBla'),
              Padding(
                padding: EdgeInsets.all(20.0),
                child: RecipeGridPage(recipes: kPestoRecipes),
              )
            ],
          ),

更新

这是您可以尝试的另一个解决方案，您必须在此文件的第 97 行添加标头：https: //github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/pesto_demo。镖

这是一个基本示例：

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              _buildAppBar(),
              _buildHeader(),
              _buildBody(),
            ],
          ),
        );
      }

      SliverToBoxAdapter _buildHeader() {
        return SliverToBoxAdapter(
          child: Text("Header"),
        );
      }

      SliverAppBar _buildAppBar() {
        return SliverAppBar(
          title: Text("Title"),
        );
      }

      SliverList _buildBody() {
        return SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return ListTile(title: Text("item :$index"));
            },
            childCount: 20,
          ),
        );
      }