列内的可滚动容器

Question

我尝试了几种不同的方法，但我无法让它发挥作用。我想要实现的布局非常简单，在原生 Android 中实现起来轻而易举：

• 顶部固定容器（蓝色）
• 下面的可滚动容器（红色）。ListView 在我的情况下不起作用。

我尝试使用SingleChildScrollView，但它似乎在Column. 也许我做错了什么，或者我没有使用正确的小部件......

我的结果：

Scaffold(
  body: Column(
    children: <Widget>[
      Container(
        height: 100.0,
        color: Colors.blue,
      ),
      SingleChildScrollView(
        child: Container(
          color: Colors.red,
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              Text('Red container should be scrollable'),
              Container(
                width: double.infinity,
                height: 700.0,
                padding: EdgeInsets.all(10.0),
                color: Colors.white.withOpacity(0.7),
                child: Text('I will have a column here'),
              )
            ],
          ),
        ),
      ),
    ],
  ),
)

Answer 1

我想也许一年后你已经做到了。

但是对于其他搜索相同问题的人来说，最简单的方法是将其包裹SingleChildScrollView在Expanded小部件内部。

Widget build(BuildContext context) =>
Scaffold(
  body: Column(
    children: <Widget>[
      Container(
        height: 100.0,
        color: Colors.blue,
      ),
      Expanded(
        child: SingleChildScrollView(
          child: Container(
            color: Colors.red,
            padding: EdgeInsets.all(20.0),
            child: Column(
              children: <Widget>[
                Text('Red container should be scrollable'),
                Container(
                  width: double.infinity,
                  height: 700.0,
                  padding: EdgeInsets.all(10.0),
                  color: Colors.white.withOpacity(0.7),
                  child: Text('I will have a column here'),
                )
              ],
            ),
          ),
        ),
      ),
    ],
  ),
);

Answer 2

问题是Column小部件不支持滚动。为了使其工作，您可以切换到ListView，但当前的实现缺少某种部分的标题。为了获得它们，您可以使用Sticky_headers包，如下所示：

Widget build(BuildContext context) => Scaffold(
      body: new ListView.builder(
          itemCount: 1,
          padding: EdgeInsets.zero,
          itemBuilder: (context, index) {
            return new StickyHeader(
                header: Container(
                  height: 100.0,
                  color: Colors.blue,
                ),
                content: Container(
                  color: Colors.red,
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('Red container should be scrollable'),
                      Container(
                        width: double.infinity,
                        height: 700.0,
                        padding: EdgeInsets.all(10.0),
                        color: Colors.white.withOpacity(0.7),
                        child: Text('I will have a column here'),
                      )
                    ],
                  ),
                ));
          }));