如何在一列中有 2 个小部件，其中 1 个是可滚动的列？

Question

所以我在一列中有两个小部件，一个是Container （顶部小部件），另一个是Column （底部小部件，应该是可滚动的），但是Column没有被视为可滚动，如下图所示：

这是代码中的Container和Column ：

<Widget>[
    topBar, // Container
    Container(
      color: Colors.transparent,
      child: SingleChildScrollView(
        child: Column( // Column in container
          children: <Widget>[
            Text(
              "Test",
              style: TextStyle(fontSize: 50),
            ),
            Text(
              "Test",
              style: TextStyle(fontSize: 50),
            ),
            Text(
              "Test",
              style: TextStyle(fontSize: 50),
            ),
            // Insert Other Text Widgets below            
          ],
        ),
      ),
    )
  ]

topBar在哪里：

Container(
    margin: EdgeInsets.all(0),
    padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
    child: Text(
      'Top Container',
      style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          fontSize: 25.0
      ),
    ),
);

我试过使用类似问题中提到的ListView ，但它做同样的事情。

我怀疑这是因为它试图超越不可滚动的父容器，但我不知道如何克服它。

---

更新

只是为了澄清，我想要做的是有一个带有固定顶部栏的 ScrollView，我不希望栏也滚动。

在 Android 上，它只是创建两个布局的一种情况，一个里面有一个 ScrollView。 但我猜 Flutter 的做法有所不同，我似乎无法理解它。

Answer 1

如果您将第二Column包装在Expanded ，它将尝试占据尽可能多的空间，然后该Column溢出的元素将滚动。 这应该可以解决您的问题。 例子：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget topBar = Container(
      margin: EdgeInsets.all(0),
      padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
      child: Text(
        'Top Container',
        style: TextStyle(
            color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25.0),
      ),
    );
    return Scaffold(
      body: Column(
        children: <Widget>[
          topBar, // Container

          Expanded( // <- Add this

            child: Container(
              color: Colors.transparent,
              child: SingleChildScrollView(
                child: Column(
                  // Column in container
                  children: <Widget>[
                    for (int i = 0; i < 30; i++)
                      Text(
                        "Test",
                        style: TextStyle(fontSize: 50),
                      ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}