列内的可滚动容器

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

问题是 Column 小部件不支持滚动。为了使其工作，您可以切换到 ListView，但当前的实现缺少某些部分的 header。为了得到它们，你可以使用 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'),
                      )
                    ],
                  ),
                ));
          }));

Answer 2

我设法使用 Stack 实现了一个工作布局，唯一的缺点是如果我有 TextField 并且我向下滚动，光标 'bubble' 会出现在我的顶部容器上方...有点难看。我的小部件在 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(),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  );

Answer 3

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

但对于搜索相同问题的其他人来说，最简单的方法是将 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'),
                )
              ],
            ),
          ),
        ),
      ),
    ],
  ),
);

列内的可滚动容器

Scrollable Container inside a Column

listview

dart

flutter

flutter-layout