flutter singlechildscrollview 布局

Question

我有以下布局，想在页面末尾为任何屏幕尺寸推送 CustomPaints，如何实现？ 我尝试了Spacer但出现错误并尝试了Flexible但我不知道如何正确使用它们。

  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            const HeaderShape(),
            const SizedBox(
              height: 50,
            ),
            body,
            SizedBox(
              height: 150,
              child: Stack(
                children: [
                  CustomPaint(
                    painter: const FooterPainter1(),
                    child: Container(),
                  ),
                  CustomPaint(
                    painter: const FooterPainter2(),
                    child: Container(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 1

如果您没有使用具有确定高度的 container/sizedBox 包装列小部件，则不能在列小部件中使用 spacer。

灵活的小部件将包装您的小部件以占用父小部件的可用空间，但不会强制子部件适应空间。

Expanded 将共享父控件的可用空间，并强制子控件更改其宽度/高度以填充可用空间。

因此，用一个带有高度的 sizedbox 包裹你的列并使用 spacer 小部件将帮助你实现你正在寻找的东西。 检查下面的代码：

SingleChildScrollView(
        child: SizedBox(
          height: MediaQuery.of(context).size.height -kToolbarHeight - MediaQuery.of(context).padding.top -MediaQuery.of(context).padding.bottom,
          child: Column(
            children: [
              Container(child: Text('My Header')),
              const SizedBox(
                height: 50,
              ),
              Container(child: Text('My Body')),
              Spacer(),
              Container(child: Text('My Footer')),
            ],
          ),
        ),
      )

如果您没有在页面中使用 appbar，只需从 SizedBox 高度参数中删除 kToolbarHeight 和 MediaQuery.of(context).padding.top。