flutter 布局 : Add a Text above a grid

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.dart

这是一个基本示例:

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