列内的可滚动容器答案

【问题标题】：Scrollable Container inside a Column列内的可滚动容器
【发布时间】：2019-03-24 03:25:15
【问题描述】：

我尝试了几种不同的方法，但我无法让它发挥作用。我想要实现的布局非常简单，在原生 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'),
              )
            ],
          ),
        ),
      ),
    ],
  ),
)

【问题讨论】：

标签： flutter listview dart flutter-layout

【解决方案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'),
                )
              ],
            ),
          ),
        ),
      ),
    ],
  ),
);

【讨论】：

是的！为我工作。
我喜欢 Flutter，但有时，我觉得......我有这么多 child-z 只是为了实现一个非常简单的东西
太棒了！应该把这个答案改成最好的；D
这应该是公认的解决方案

【解决方案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'),
                      )
                    ],
                  ),
                ));
          }));

【讨论】：

不是我希望的答案，但谢谢你，至少我知道我必须找到另一种实现我需要的方法。

【解决方案3】：

我设法使用Stack 实现了一个工作布局，唯一的缺点是如果我有一个TextField 并且我向下滚动，光标“气泡”会显示在我的顶部容器上方...有点丑。 Stack 中我的小部件的顺序不会影响这一点。

See screenshot

  Widget build(BuildContext context) =>
  Scaffold(
    body: Stack(
      children: <Widget>[
        Container(
          height: 100.0,
          color: Colors.blue,
        ),
        Container(
          margin: EdgeInsets.only(top: 100.0),
          child: SingleChildScrollView(
            child: Container(
              color: Colors.red,
              padding: EdgeInsets.all(20.0),
              child: Column(
                children: <Widget>[
                  Container(
                    width: double.infinity,
                    height: 700.0,
                    padding: EdgeInsets.all(10.0),
                    color: Colors.white.withOpacity(0.7),
                    child: TextField(),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  );

【讨论】：

【解决方案4】：

在 SingleChildScrollView 中添加这个..

scrollDirection: Axis.vertical

【讨论】：

不幸的是，没有任何变化......仍然无法正常工作。
这是默认设置