在滚动视图中带有扩展小部件的颤动列

Question

我正在尝试创建一个顶部有内容的列，底部有更多内容，如页脚，中间有填充空间。 此外，当屏幕对于顶部内容 + 页脚内容（小设备、键盘打开等）来说太小时，它需要滚动

像这样的东西

当内容大于屏幕时，它应该滚动

当内容小于屏幕时，在中间弯曲

尝试了在 SO 上找到的几种不同方法，但无法弄清楚如何使其工作。 使用singleChildScrollView给Column无限高度， Flexible将抛出一个错误，因为它是无限的。

目前的代码

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey,
        child: SafeArea(
            child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) => SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.greenAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Content')),
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.pinkAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Content')),
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.pink.shade100,
                        margin: EdgeInsets.all(8),
                        child: TextField()),
                    Flexible(
                      child: Container(
                          alignment: Alignment.center,
                          color: Colors.blueAccent,
                          margin: EdgeInsets.all(8),
                          child: Text('Flex')),
                    ),
                    Container(
                        alignment: Alignment.center,
                        height: 100,
                        width: 250,
                        color: Colors.redAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Footer')),
                  ])),
        )),
      ),
    );
  }
}

Answer 1

经过多次反复试验，并且使用LayoutBuilder和IntrinsicHeight类的东西没有成功，我终于为我使用CustomScrollView和一个名为SilverFillRemaining的Sliver小部件的用例制定了解决方案。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey,
        child: SafeArea(
            child: CustomScrollView(
          slivers: [
            SliverFillRemaining(
              hasScrollBody: false,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: double.infinity,
                        color: Colors.greenAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Content')),
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.pinkAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Content')),
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.pink.shade100,
                        margin: EdgeInsets.all(8),
                        child: TextField()),
                    Flexible(
                      fit: FlexFit.tight,
                      child: Container(
                          alignment: Alignment.center,
                          color: Colors.blueAccent,
                          margin: EdgeInsets.all(8),
                          child: Text('Flex')),
                    ),
                    Container(
                        alignment: Alignment.center,
                        height: 100,
                        width: 250,
                        color: Colors.redAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Footer')),
                  ]),
            ),
          ],
        )),
      ),
    );
  }
}

希望能帮助其他有类似用例的人