Flutter Row 没有占用完整的 Scaffold 高度

Posted 2023-02-23

【中文标题】Flutter Row 没有占用完整的 Scaffold 高度

【英文标题】：Flutter Row not taking full Scaffold height

【发布时间】：2020-08-21 01:28:17

【问题描述】：

我正在研究一个带有颤振的平板电脑应用程序的骨架，我正面临一个可能非常简单的问题，但我很难弄清楚这里发生了什么。

应用程序的骨架基本上应该是这样的：

为此，我编写了一个简单的Stateless 类，如下所示：

class BaseDetailsRoute extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Flexible(flex: 1, child: _selectionColumn()),
          Flexible(flex: 7, child: _contentArea())
        ],
      ),
    );
  

  Widget _contentArea() => Container(color: Colors.orange,);

  Column _selectionColumn() => Column(
    children: <Widget>[
      Expanded(child: Container(color: Colors.blue,))
    ],
  );

这给了我几乎预期的结果：

这里的小问题在屏幕底部，如您所见，在Scaffold 中，我已经放置了backgroundColor: Colors.grey，并且在将Row 渲染到屏幕中之后，似乎有些因为我不能让它占据整个可用高度，而且我仍然在底部看到了 Scaffold 的一点灰色背景色。

我尝试将整个 Scaffold 包装在一个 SafeArea 小部件中，但它不起作用。

我怎样才能以一种简单的方式解决这个问题，这意味着不必添加一堆其他小部件？

【参考方案1】：

这有点奇怪，但您的代码按我的预期工作（对于纵向和横向）。你用的是什么模拟器？

见图：Pixel 2 API 29 Emulator Portrait Pixel 2 API 29 Emulator Lanscape

【讨论】：

好的，很高兴知道，我使用的是真实设备，在这种情况下是平板电脑，所以，它可能是平板电脑正在生产的东西？，很奇怪

不，不幸的是，我只能使用我现在拥有的一台平板电脑，我将尝试在模拟器上进行测试。

【参考方案2】：

你可以试试吗

     child: Column(
                mainAxisSize:  MainAxisSize.max,
                children: <Widget>[

让我知道它是否有效

【讨论】：

谢谢，但不是，请注意，列位于脚手架主体中的主行内，因此列“似乎”不是问题所在，我认为。