列内的可滚动容器

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'),
                      )
                    ],
                  ),
                ));
          }));

Answer 3

我设法使用

Stack

实现了工作布局，唯一的缺点是，如果我有

TextField

并且向下滚动，光标“气泡”会显示在我的顶部容器上方......这很好的丑陋。我的小部件在

Stack

中的顺序不会影响此。

  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 4

如果您不想将列扩展至最大尺寸，请将 SingleChildScrollView 包装为Flexible。

return Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    //header
    Container(
      color: Colors.red,
      height: 50,
      child: const Text("Header"),
    ),
    Flexible(
        child: SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          //top
          Container(
            color: Colors.blue,
            height: 100,
            child: const Text("Top"),
          ),
          Container(
            color: Colors.yellow,
            height: 5000,
          ),
          //bottom
          Container(
            color: Colors.green,
            height: 100,
            child: const Text("Bottom"),
          ),
        ],
      ),
    )),
    //footer
    Container(color: Colors.red, height: 50, child: const Text("Footer")),
  ],
);