文本被放置在屏幕上但会滚动

Question

android studio 3.6

仅当文本不适合屏幕时，我才需要滚动文本。因此，如果文本放置在屏幕上，则不得滚动。

摘要：

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        backgroundColor: Colors.orange,
        body: SafeArea(
            child: SingleChildScrollView(
                child: new Container(
                    color: Colors.white,
                    height: MediaQuery.of(context).size.height,
                    width: MediaQuery.of(context).size.width,
                    child: new Column(
                        children: [
                          new Text("column_1", style: TextStyle(backgroundColor: Colors.yellow)),
                          new Text("column_2", style: TextStyle(backgroundColor: Colors.blue)),
                          new Text("column_3", style: TextStyle(backgroundColor: Colors.black12))])))));
  }
}

结果

但是我可以滚动。为什么？

Answer 1

也许在ScrollView本身上使用高度和宽度，而不是在Column上使用。列占用了屏幕上更多的空间，导致其滚动。

Answer 2

当您的列位于singleChildScrollView()内时，它正在滚动，默认情况下会启用滚动。

由于我们的容器正在使用MediaQuery设置其高度，因此singleChildScrollView()没有垂直空间可扩展到其中，因此会导致滚动行为。

相反，我们应该将singleChildScrollView()包装在容器中，然后在该容器上执行MediaQuery。

请参见下面的代码：

 return new Scaffold(
      backgroundColor: Colors.orange,
      body: SafeArea(
        child: Container(
          color: Colors.white,
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: SingleChildScrollView(
            child: new Container(              
              child: new Column(
                children: [
                  new Text(
                    "column_1",
                    style: TextStyle(backgroundColor: Colors.yellow),
                  ),
                  new Text(
                    "column_2",
                    style: TextStyle(backgroundColor: Colors.blue),
                  ),
                  new Text(
                    "column_3",
                    style: TextStyle(backgroundColor: Colors.black12),
                  ),                  
                ],
              ),
            ),
          ),
        ),
      ),
    );