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

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

1 个答案: